电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式Web设计：使用HTML5和CSS3实践（11） [打印本页]

作者: look_w 时间: 2019-2-18 19:10 标题: 响应式Web设计：使用HTML5和CSS3实践（11）

第6章用CSS3创造令人惊艳的美

一点小感受：总觉得自发的细致阅读一本书是很没有动力来源和成效的事情，因为没有应用到具体项目中，你不会想深究。目前所看的这些章节除了前三章外即时如此，其实只需要有个概念在脑袋中，真的用到的时候有搜索引擎在手然后就行了。急切想翻阅完毕要开始看Linux相关的书籍了~ 以下为第6章简略笔记：

使用CSS3可以替代图片减少http请求。
需要添加浏览器私有前缀来保证最大的浏览器兼容性，或者使用一些JavaScript，它会自动为CSS3追加浏览器私有前缀。

6.1 文字阴影

text-shadow: 1px 1px #cccccc; 参数分别表示右侧阴影大小，下侧阴影大小，模糊距离）。
颜色可以使用hex、hsl、rgb颜色。
大小可以使用px、em、rem。
还可以用逗号分隔的方式使用多重文字阴影。

6.2 盒阴影

盒阴影的语法和文字阴影完全一样。
可以将text-shadow后的第一个参数指定为inset来设置内阴影。
同样可以设置多重阴影。

6.3 背景渐变

线性背景渐变，方法为设定起点、过渡点、终点的颜色方案。
径向背景渐变，可以设置发散形式的渐变，可选择的类型（圆、椭圆等）很多，能做出很酷炫的效果。
重复渐变。

6.4 背景渐变图案

有一些家伙用CSS的背景技术制作了一些图案能够在背景中渐变，没有美工或者带宽有限减少用大图的时候，或许是个选择。

6.5 CSS3的响应性

针对上述学习的特性，务必记得针对不同的视口做不同的声明。
为了浏览器兼容性，书写CSS3需要私有前缀，还有一种快速编写CSS3的方法，就是使用CSS预处理器，比如最流行的SASS和LESS（闻名已久未曾用过）。

6.6 组合使用CSS3属性

略（结合该书开篇的案例来操作一把上面的新属性）。
6.7 多重背景图片

在CSS3中我们可以使用多重背景，各自有个子的大小和位置，相互之间用逗号隔开就行。

6.8 更多CSS特性

上面是介绍的只是CSS3的一小部分但属于最常用的。

6.9 可缩放图标：响应式设计中的完美选择

@font-face图标就是将字符做成图标的特定字体，以往我们的需要使用很多的图标图片，或者组合成一张很大的图，现在只需要用一种字体就涵盖所有需要的图标。比较流行的比如font-awesome就是这样的原理（哦，原来如此~）。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)