CSS3之新UI方案

border-radius 圆角

参数可为像素 也可为百分比
当一个参数时 作用范围为四个角
当两个参数时 作用范围为 左上右下 右上左下
当三个参数时 作用范围为 左上 右上左下 右下
当四个参数时 作用范围为 左上 右上 右下 左下
当参数中有‘/‘时 例如 100px/150px 则表示:X轴半径/Y轴半径

-border-image 边框背景

-border-image:图片链接 图片切割上下 图片切割左右 边框排列方式 ; 
border-image-repeat:;边框排列方式
                    round 平铺 与repeat效果一样
                    repeat 重复
                    stretch 拉伸 默认
在-webkit-中会自动补上中间部分 

-moz-border-left-colors: 边框多色彩处理

例:-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;

注：目前只在火狐中起效果

-webkit-repeating-linear-gradient  平铺渐变

-linear-gradient:  线性渐变

IE9及9以下不支持线性渐变

通过滤镜处理:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘0‘);
可兼容到IE6
startColorstr 开始颜色
endColorstr 结束颜色
GradientType 1为从left->right 0为从top->bottom

-radial-gradient:方向，关键字(可选)，颜色;

径向渐变关键字

closest-size 向最近端渐变
closest-corner 向最近角渐变
farthest-corner 向最远角渐变
contain 包含(元素将其包含 使其渐变不会超出元素周围)
cover 覆盖(渐变将整个元素铺满)

background-size:背景尺寸

background-size:contain 包含(缩小) 元素包含背景图(背景图刚好放进盒子里)
cover 覆盖(放大) 背景图等比放大后将元素填满

background-origin:背景图原点设置

background-origin:border-box; 从边框开始计算
                           content-box 从内容开始计算
                           padding-box 从内补白开始计算(默认)
background-clip: 背景裁剪

background-clip:border-box; 默认
解决背景半透明边框显示背景图片的问题:
                       padding-box 切除padding以外的背景
                       content-box 切除content以外的背景
                       -webkit-background-clip:text; 切除文字以外的背景(目前火狐不适用)

CSS3之新UI方案

原文：http://www.cnblogs.com/dreamerC/p/6218525.html