CSS3各属性范例整理
以下收集的是CSS3各属性范例，如圆角、阴影、动画等，都是些非常基础的知识，希望对你有所帮助！
CSS3边框圆角特效（border-radius）:
属性：
border-top-right-radius
border-bottom-right-radius
border-top-left-radius
border-bottom-left-radius
如右下角圆角边框border-bottom-right-radius：
1 2 3 |
border-bottom-right-radius:2em; -moz-border-radius-bottomright:2em; -webkit-border-bottom-right-radius:2em; |
推荐文章：css3中Border-radius实例讲解与学习
CSS3图片边框效果（border-image）
取值：
none：默认值。无背景图。
image：使用绝对或相对 url 地址指定背景图像。
number：边框宽度用固定像素值表示。
percentage：边框宽度用百分比表示。
[ stretch | repeat | round ]：拉伸 | 重复 | 平铺 (其中stretch是默认值。)
分解属性：
border-image-source 指定border的背景图的url
border-image-slice 设置图片如何切割的属性，非定位！
border-image-width 定义border-image的显示区域的
border-image-repea 重复方式
如图片重复边框：border-image,type=round
1 2 3 4 |
border-width:15px; -moz-border-image:url(图片地址) 30 30 round; -webkit-border-image:url(图片地址) 30 30 round; border-image:url(图片地址) 30 30 round; |
推荐文章：css3.0：border-image 边框背景（一）
CSS3阴影效果（box-shadow）：
取值：
如div阴影效果：
1 2 3 |
box-shadow:5px 5px 10px 0px #000; -moz-box-shadow:5px 5px 10px 0px #000; -webkit-box-shadow:5px 5px 10px 0px #000; |
推荐文章：CSS3属性box-shadow使用教程
CSS3背景（background-image）
新增了4个属性，分别是：
Background Clip：控制背景显示的位置
Background Origin：用来确定背景图片在box中的定位，需要与background-position配合使用
Background Size：用来重设你的背景图片
Background Break：控制背景在不同区域显示
如设定背景大小：
1 2 3 4 5 |
background-image:url(image/bg-1gif.gif); background-repeat:no-repeat; background-size:400px 180px; -moz-background-size:400px 180px; -webkit-background-size:400px 180px; |
推荐文章：css3教程:background属性调整增强
CSS3透明度效果（opacity）
值的范围为 0~1
如下：
1 2 |
opacity:0.5; filter:Alpha(opacity=50) /*For IE8*/ |
CSS3旋转效果（transform）
属性：
rotate()：传递一个度数值来转动一个对象
skew()：倾斜（ps中的斜切），参数是度数
scale()：一个缩放功能，两参数的含义:依次x轴缩放 y轴缩放，如 scale(1.0, 0.75)
translate()：基于X和Y 坐标重新定位元素
matrix（）：矩阵变换，就是基于X和Y 坐标重新定位元素
CSS3如下：
1 2 3 4 |
transform:rotate(2deg); -webkit-transform:rotate(2deg); -moz-transform:rotate(2deg); -o-transform:rotate(2deg); |
CSS3动画效果（transition ）
属性：
ransition-property：指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性
transition-duration：过渡效果的持续时间
transition-timing-function：指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy
transition-delay：指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”，初始默认值为0
CSS33如下：
1 2 3 4 5 6 7 8 |
#div{ height:280px; transition:height 2s; -webkit-transition:height 2s; -moz-transition:height 2s; -o-transition:height 2s; } } |
转自:为网站而疯狂