(1)渐进增强,它强调创建所有用户都能访问的基本层面的内容和功能,同时为更强大的浏览器提供更强的体验。polyfill通常使用JavaScript
实现,它可以为较弱的浏览器提供一定程度的对HTML5
和CSS3
的API和属性的支持。
(2)厂商前缀,CSS3
规范要达到W3C
的推荐标准状态要经过数年,在包含某个特性的初始阶段,浏览器通常会使用厂商前缀来实现这类特性,形如-webkit-border-radius:10px
,不同的主流浏览器都对应有其自身的前缀,如-webkit-
、-ms
、-moz-
等。
(3)为元素创建圆角,使用代码如下:
.class {
-webkit-border-radius:r;
-border-radius:r
}
border-radius: 10px 20px
表示将左上方右下方圆角半径设为10px,右上方和左下方圆角半径设置为20px
;border-radius: 20px 0 0
将左上方圆角半径设为20px,其余为0;border-radius:10px 20px 0 30px
,将左上方圆角半径设为10px,右上方20px,右下方设为0;左下方设为30px。创建椭圆形圆角border-radius:x/y
,x是水平方向的半径,y是垂直方向上的半径。不支持该属性的浏览器仅会以方角显示。若背景透过圆角,可在其后添加background-clip:padding-box
。还可使用border-top-left-radius
等指定某个圆角的半径。该属性非继承。
(4)为文本添加阴影效果,text-shadow:x-offset y-offset blurradius color
,其有四个值分别用空格分开,不需要使用厂商前缀。若不指定blur-radius
的值,其默认为0px
。x-offset
和y-offset
值可以是正数也可以是负数,该属性是继承的。为其他元素添加属性值,box-shadow
有流个值:x-offset
、y-offset
、blur-radius
可选的inset
关键字、可选的带长度单位的spread
值及color
属性。不指定的值都假设为0
。box-shadow
属性不可继承。inset
关键字可以让阴影位于元素内部。box-shadow:2px 2px 10px rgba(255,0,0,.75),5px 5px 20px blue
应用两个阴影。
(5)为单个HTML元素可指定多个背景。设置背景渐变色background:linear-gradient(to right,silver,black)
指定渐变色方向bottom right
、bottom left
等。渐变的方式分为线性渐变:background:linear-gradient(120deg,aqua,navy)
、径向渐变:background:radial-gradient(100px 50px,yellow,red)
。还可控制渐变的尺寸。为防止浏览器不支持渐变属性,可提供备用背景颜色。opacity
设置元素的透明度,同时会对文本的透明度产生影响。
(6)生成内容,使用:before
、:after
伪元素,为页面添加设计效果。一个基于生成内容方法创建但三角形对话气泡的网站http://www.cssarrowplease.com/
。
(7)sprite
拼合图像,图像往往会减慢页面的加载速度,可将多个图像拼合成单个背景图像(sprite)
,再通过CSS控制具体显示图像的哪一部分。通过$=
可根据特定的扩展名找到对应的类型。一个免费提供图标的网站www.famfamfam.com/lab/icons/silk
。