使用css3进行增强

• 渐进增强

　　什么是渐进增强：较弱的浏览器和较强的浏览器功能和行为不一样要一样，但是一定要保证页面内容是可以访问的，渐进增强的理念就是为现代浏览器使用更丰富的样式。

• 为不支持某些属性的浏览器使用polyfill（垫片）

　　　polyfill为较弱的浏览器提供一定程序的对html5和css3 api 的支持

　　　　关于IE，css3pie可以为IE6-9 提供大部分css属性的支持

• 为元素创建圆角,属性不继承

　　　　1） border-radius:top-left-value   top-right-value   bottom-right-value    bottom-left-value

　　　　-webkit-border-radius:  ---    （需要添加前缀）

　　　　2）border-top-righe-radius

　　　　3)  椭圆圆角   border-radius:x/y   -webkit-border-radius:x/y

　　　　4)  原型圆角：border-radius:元素的宽度/2

　　为了避免元素的背景透过其圆角：设置 background-clip:padding-box

• 为文本添加阴影（不需要使用前缀），属性继承

　　　text-shadow:x-offset  y-offset  blur  color  //前三个值需要带长度

• 为元素添加阴影,需要webkit前缀

　　　　1）box-shadow，属性有六个值，x-offset   y-offset  blur  inset关键字  spread  colr ， 前三个值带长度，spread可选的带长度，blur,inset关键字可选

　　　　inset关键字用于创建内阴影

　　　　2）为元素创建多重阴影 

　　　　　　box-shadow:x-offset1 y-offset1  blur1  spread1 color1  inset,

　　　　　　　　　　　　x-offset2 y-offset2  blur2  spread2 color2  inset

• 为元素创建多重背景,不需要使用厂商前缀

　　　　background-image:url(),url(),url();

　　　　background-repeat:no-repeat,repeat-x,repeat-y;

　　　　background-position:12px 30px , 17% 36%  , -12%  -34%;

• 使用渐变背景

　　　　css3创建渐变有两种方式：线性渐变和径向渐变

　　　　1）线性渐变

　　　　　　background:linear-gradient(方向，颜色)

　　　　　　方向：to top , to bottom , to left , to right , to bottom right  , 角度deg

　　　　　　颜色值可以有多个，也可以带透明的颜色值rgba()

　　　　2) 径向渐变，兼容各浏览器需要加前缀-o-  -webkit-  -moz-  

　　　　　　background:radial-gradient:(at top , yellow 30%, red 50%)

　　　　　　at指定渐变的中心点位置，at top , at bottm , at 100px 200px , 30% 30% at bottom right

　　　　　　颜色后面跟着百分数，表示该颜色渐变停止的位置

• 为元素设置不透明度

　　　　opacity: n ; 这里的n表示不透明度， n 在0到1之间

• 生成内容的效果

　　　　使用伪类:before  :after  结合 content , 可以在元素的前面和后面添加些内容