CSS3常用属性注解
CSS3浏览器支持的具体概况,请阅读这些文章:
http://www.webdevout.net/browser-support-css http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ 1、CSS3-文字阴影 text-shadow:2px 2px 2px #cecece; 属性值解释:右侧偏移量(像素)/下方偏移量(像素) /阴影模糊度(像素) /阴影值(RGB),其中值得注意的是:在chrom中,text-shadow中的阴影模糊度将会影响文字的清晰度(它也会对文字进行模糊),在opera、firefox、safari均正常。 2、CSS3-圆角 border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; 属性值解释:右侧偏移量(像素)/下方偏移量(像素) /阴影模糊度(像素) /阴影值(RGB)/阴影类型(inset) 3、CSS3-渐变 background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f2f2f2)); background:-moz-linear-gradient(center bottom,#f2f2f2,#fff); 属性值解释:webkit:渐变类型(linear)/渐变的开始位置(left top)/渐变的结束位置(left bottom)/开始的渐变色(#ffff)/结束的渐变色(#f2f2f2)Mozilla:-moz-(渐变类型)-gradient(渐变的开始位置/渐变的结束位置/开始的渐变色/结束的渐变色); 4、CSS3-边框背景 border-mage:url(http://people.opera.com/pepelsbey/experiments/bdi/i/molecule.png) 0 50 50 50 stretch; -webkit-border-mage:url(http://people.opera.com/pepelsbey/experiments/bdi/i/molecule.png) 0 50 50 50 stretch; -moz-border-mage:url(http://people.opera.com/pepelsbey/experiments/bdi/i/molecule.png) 0 50 50 50 stretch; 属性值解释:边框背景图片可以设置的模式有stretch、repeat、round; 其中设置的数值表示从图片上下左右对应的位子开始对图片进行stretch、repeat、round模式的变化 5、CSS3-transform(变形) -o-transform:rotate(0.10rad); -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); 属性值解释:webkit和moz中可以定义整数旋转度数,但是在opera中需要定义浮点数的度数 6、CSS3-transition(过渡) -o-transition-property : background-color,color;-o-transition-duration:2s; -webkit-transition-property:background-color,color;-webkit-transition-duration:2s; -moz-transition-property:background-color,color;-moz-transition-duration:2s; 属性值解释:-o-transition-property定义过渡属性。-o-transition-duration定义持续时间 7、CSS3-nth-child(斑马线) footer ul li:nth-child(4n+1){background:red;} 属性值解释:这是CSS3中的选择符,实际上它也是一个伪类。它的属性值可接受一个整数、或者odd、even、或者一个表达式。 具体请参考: http://css-tricks.com/how-nth-child-works/ 8、CSS3-webkit-box-reflect(倒影) -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(red)); 属性值解释:仅支持webkit内核的浏览器safari、chrom http://stuntsnippets.com/css3-reflection/