第十四章：使用CSS3进行增强

1.为不支持某些属性的浏览器使用polyfill：如果想弥合较弱的浏览器和较强的浏览器之间的功能差异，可以使用polyfill（通常又称作垫片），通常用js实现。但是有些较弱的浏览器运行JS的速度要慢得多。

2.为元素创建圆角：

（1）为元素创建四个相同的圆角:

.all-corners{

-webkit-border-radius:r

border-radius:r

}   这里的r是圆角半径的值

（2）为元素创建一个圆角：

.one-corner{

-webkit-border-top-left-radius:r

border-top-left-radius:r

}                                这里的r是圆角半径的值

创建右上方圆角：用top-right代替top-left

创建右下方圆角：用bottom-right代替top-left

创建左下方圆角：用bottom-left代替top-left

（3）为元素创建椭圆角：

.elliptical-corners{

-webkit-border-radius:x/r

border-radius:x/r

}

这里的x是圆角在水平方向上的半径大小，y是圆角在垂直方向上的半径大小。

（4）创建圆形：

.circle{

-webkit-border-radius:r

border-radius:r

}

这里的r是圆的半径大小。

3.每个主流浏览器都有其自身的前缀：

-webkit-（支持旧版的Android、iOS和Safari）、-moz-（Firefox）、-ms-（IE）、-o-（Opera）应该将前缀放在CSS属性名的前面。

4.为其他元素添加阴影：

使用text-shadow属性可以为元素的文本添加阴影，使用box-shadow属性可以为元素本身添加阴影。box-shadow属性接受六个值：带长度单位的x-offset、带长度单位的y-offset、可选的带长度单位的blur-radius、可选的inset关键字、可选的带长度单位的spread值以及color值。如果不指定blur-radius和spread的值默认为0。

5.为元素添加阴影：

（1）输入-webkit-box-shadow:

（2）分别输入表示：x-offset、y-offset、blur-radius、spread和color的值。

（3）输入box-shadow：重复上一步。

6.创建内阴影：

（1）输入-webkit-box-shadow：

（2）分别输入表示x-offset、y-offset、blur-radius、spread和color的值

（3）在冒号之后输入inset，再输入一个空格

（4）输入box-shadow：重复第（2）步和第（3）步。

7.为元素应用多重阴影：

（1）输入-webkit-box-shadow：

（2）分别输入表示-offset、y-offset、blur-radius、spread和color的值

（3）输入逗号，

（4）对每种属性使用不同的值重复第（2）步

（5）输入box-shadow：再重复第（2）步至第（4）步

8.将box-shadow改回默认值：

（1）输入-webkit-box-shadow：none

（2）输入box-shadow：none

9.应用多重背景：

（1）输入background-color:b这里的b是希望为元素应用的备用背景颜色

（2）输入background-image:u这里的u是绝对或相对路径图像引用的URL列表（用逗号分隔）

（3）输入background-position:p这里的p是成对的x-offset和y-offset

（4）输入background-repeat:r这里的r是repeat、repeat-y或no-repeat值

10.使用渐变背景：

使用CSS创建渐变有两种主要的方式：线性渐变和径向渐变。

创建备用背景颜色：输入background:color这里的color可以是十六进制数、RGB值。

定义线性渐变：

（1）输入background:linear-gradient（

（2）如果你希望渐变的方向是从上往下，则跳过这一步

输入方向后面加一个逗号，这里的方向指的是to top、to right、to left、to bottom right、tobottomleft、to top right 或to top left这样的值。

（3）根据后面讲到的“指定颜色”或“指定颜色和颜色的停止位置”，定义渐变的颜色

（4）输入）；完成渐变

定义径向渐变：

（1）输入background:radial-gradient（

（2）指定渐变的形状。如果希望渐变的形状根据下一步中指定的尺寸自行确定，则跳过这一步。否则输入circle或ellispse

（3）指定渐变的尺寸。如果你希望渐变的尺寸为自动指定的值（默认值为farthest-corner，最远的角）则跳过这一步。输入size，这里的size可以是同时代表渐变宽度和高度的一个长度值也可以是代表宽度和高度的一对值。注意：如果只使用一个值，则这个值不能是百分数。输入size，这里的size是closest-side、farthest-side、closest-corner或farthest-corner。

（4）指定渐变的位置。如果你希望渐变从元素中心开始，则跳过这一步。输入pos，这里的pos是at top、at right、at left、atbottom right、at bottom left、at top right、at top left等。

（5）如果指定了第（2）步至第（4）步中的任何一步，输入一个逗号。

（6）根据后面讲到的“指定颜色”或“指定颜色和颜色的停止位置”，定义渐变的颜色。

（7）输入）；完成渐变。

11.为元素设置不透明度：

使用opacity属性可以修改元素的不透明度。修改元素不透明度的方法：输入opacity：o这里的o表示元素的不透明度（0.00完全透明~1.00完全不透明之间的两位小数、不带单位）

12.生成内容的效果：

:before和:after伪元素可以与content属性结合使用从而生成内容，生成内容指的是通过CSS创建的内容而不是由HTML生成的。

13.使用sprite拼合图像：

浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。为了解决这一个问题，可以将多个图像拼合成单个背景图像，再通过CSS控制具体显示图像的一部分。