响应式设计入门-06CSS3：阴影、渐变和图片背景讲解.ppt

06. 几个CSS3高级特性 内容 使用 CSS3 制作文字阴影 使用 CSS3 制作盒阴影（即元素投影） 使用 CSS3 制作渐变背景 使用 CSS3 的多重背景图片 使用 CSS3 背景渐变来制作图案 使用 CSS3 的@font-face 规则来制作节省带宽的图标 文字阴影 文字阴影的基本语法： .element { text-shadow: 1px 1px 1px #cccccc; } 第一个值指的是右侧阴影的大小，第二个值指的是下方阴影的大小，第三个值指的是模糊距离（即阴影从开始变淡到完全消失的距离），最后一个值是阴影颜色。 阴影颜色也可以是HSL(A)或RGB(A)： text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4); 如何定义颜色 考虑到浏览器兼容性，在使用HSLA 或RGBA 阴影时我一般都这样做： text-shadow: 4px 4px 0px #404442; text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4); 即先定义一个使用十六进制颜色的阴影（作为针对老版本浏览器的备用方案），然后再定义一个使用HSLA 或RGBA 颜色的阴影。 其他使用颜色的地方都可以这样处理。 阴影值也可以使用 em 或rem 单位 如：文字的大小是102 像素，文字阴影大小是4 像素。使用公式： 目标元素尺寸÷上下文元素尺寸=百分比尺寸 来计算一下（4÷102=.039215686），结果如下： text-shadow: .039215686em .039215686em 0em #dad7d7; /* 4 ÷ 102 */ 阴影一般都比较小，一个或两个像素的阴影，在所有视口中的效果都很不错。所以就用px单位也行。 如果要在一大段阴影文字中取消一部分文字的阴影，可使用： text-shadow: none; 使用负值可以制作出左上方阴影效果，例如： text-shadow: -4px -4px 0px #dad7d7; 如果不需要阴影模糊效果，可以将text-shadow 的第三个值（模糊半径）从声明中删除： text-shadow: -4px -4px #dad7d7; 这种简写假定第三个值没有声明，而前两个值表示阴影偏移距离。 text-shadow特效 浮雕文字阴影效果 text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75); 多重文字阴影 只需将两组值使用逗号分隔开即可，比如： text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7; 盒阴影 语法很简单： box-shadow: 0px 3px 5px #444444; 但是，盒阴影的的跨浏览器支持并不好，所以明智的做法是使用浏览器私有前缀，例如： -ms-box-shadow: 0px 3px 5px #444444; -moz-box-shadow: 0px 3px 5px #444444; -webkit-box-shadow: 0px 3px 5px #444444; box-shadow: 0px 3px 5px #444444; .sideBlock img { max-width: 45%; box-shadow: 0px 3px 5px #444444; } 图片加上了box-shadow效果： box-shadow特效 内阴影——出现在元素内部，而不是外部。内阴影可用来制作光晕效果，如下所示： box-shadow:inset 0 0 40px #000000; 例如：，为整个页面添加光晕效果，这样就会让页面的四周都出现阴影。 body { -moz-box-shadow:inset 0 0 30px #000000; -webkit-box-shadow:inset 0 0 30px #000000; box-shadow:inset 0 0 30px #000000; } 多重阴影： box-shadow: inset 0 0 30px hsl(0, 0%, 0%), inset 0 0 70px hsla(0, 97%, 53%, 1); 线性渐变 用纯CSS3就可以做出渐变，而且不用图片，代码如下： background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%); 四个参数的含义如下： 第一个值定义了渐变的方向。不定义该值则默认是一个垂直从顶部到底部的渐变。你还可以使用如to top right 这样的值，这会产生一个朝向右上角的对角