CSS3新增UI样式

1、圆角：border-radius

• 1个：都一样 border-radius: 一样
• 2个：对角 border-radius: 左上&右下 右上&左下
• 3个：斜对角 border-radius: 左上 右上&左下 右下
• 4个：全部，顺时针 border-radius: 左上 右上 右下 左下
• border-radius: 1-4个数字 / 1-4个数字——前面是水平半径，后面是垂直半径border-radius: 10px/5px;
• 不给“/”则水平和垂直一样 

2、边框

（1）边框图片：border-image

• border-image-sourceg 引入图片
• border-image-slice 切割图片
• border-image-width 边框宽度
• border-image-repeat 图片的排列方式：round 平铺,repeat 重复,stretch拉伸

（2）边框颜色 border-colors（火狐下）

3、线性渐变

（1）格式

• 线性渐变格式 linear-gradient([<起点> || <角度>] ?<点>, <点>…)
• 只能用在背景上 

（2）参数

• 起点：从什么方向开始渐变

默认：top left（左上角）

• 角度：从什么角度开始渐变

xxx deg的形式（逆时针旋转）

• 点：渐变点的颜色和位置

black 50%，位置可选

（3）实例：background-image:-webit-linear-gradient(60deg,red 0,blue 40%,green 100%)

（4）平铺：background：-webit-repeating-linear-gradient(15deg,green ,green 10px,#fff 10px,#fff 20px,);

（5）兼容IE9以下:（gradientType=1为从左往右，0为从上往下）

　　  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');　　

4、径向渐变

（1）格式

• 线性渐变格式 radial-gradient([<起点>]? [<形状> || <大小>]?  <点>, <点>…)

（2）参数

• 起点：可以是关键字（left,top,right,bottom），具体数值或百分比

• 形状：ellipse（椭圆）、circle（圆形）

• 大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;

　　　　

　　　　注意：firefox目前只支持关键字

• 点：渐变点的颜色和位置

black 50%，位置可选

5、背景

（1）多背景：逗号分开 background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

（2）背景尺寸：background-size:x y

• background-size:100% 100%
• Cover 放大
• Contain 缩小

（3）背景原点：background-origin ： border | padding | content 

• border-box： 从border区域开始显示背景。
• padding-box： 从padding区域开始显示背景。
• content-box： 从content区域开始显示背景。

（4）背景裁剪：background-clip： border | padding | content|no-clip 

• border-box： 从border区域向外裁剪背景。
• padding-box： 从padding区域向外裁剪背景。
• content-box： 从content区域向外裁剪背景。
• text： 从文本区域向外裁剪背景。（仅支持webkit内核浏览器）

6、遮罩

• Mask-image
• Mask-position
• Mask-repeat