css3-新增UI样式
border-radius: 1-4个数字 / 1-4个数字
•前面是水平，后面是垂直
•不给“/”则水平和垂直一样
–border-radius: 10px/5px;
参数
•各种长度单位都可以：px，%，…
•%有时很方便
–但宽高不一致时不太好
l用法
•1个：都一样
–border-radius: 一样
•2个：对角
–border-radius: 左上&右下 右上&左下
•3个：斜对角
–border-radius: 左上 右上&左下 右下
•4个：全部，顺时针
–border-radius: 左上 右上 右下 左下
边框
l边框图片 border-image
•border-image-sourceg 引入图片
•border-image-slice 切割图片
•border-image-width 边框宽度
•border-image-repeat 图片的排列方式
–round 平铺,repeat 重复,stretch拉伸
l边框颜色 border-colors
线性渐变
l线性渐变格式
•linear-gradient([<起点> || <角度>,]? <点>, <点>…)
•只能用在背景上
–IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
•参数
–起点：从什么方向开始渐变 默认：top
»left、top、left top
–角度：从什么角度开始渐变
»xxx deg的形式
–点：渐变点的颜色和位置
»black 50%，位置可选
----------------------------------------------
l线性渐变实例
•最简单
–red, green
–从上到下
•起点位置
–left top, red, green
–30deg, red, green
»逆时针
•repeating-linear-gradient
------------------------------------------------
l线性渐变实例(2)
•加入点的位置
–top, red 40%, green 60%
–top, red 50%, green 50%
»同一个位置两个点——直接跳变
–也可以用px
•配合rgba
–top, rgba(255,255,255,1), rgba(255,255,255,0)
•加入背景图片
–background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
l实例：百度音乐图片光影效果
---------------------------------------------------------
径向渐变
lradial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
•起点：可以是关键字（left,top,right,bottom），具体数值或百分比
•形状： ellipse、circle
•大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
–注意firefox目前只支持关键字
--------------------------------------------------------
背景
l多背景
•逗号分开
–background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
–
l背景尺寸
•background-size:x y
–background-size:100% 100%
–Cover 放大
–Contain 缩小
-------------------------------------------------------------
lbackground-origin ： border | padding | content
•border-box： 从border区域开始显示背景。
•padding-box： 从padding区域开始显示背景。
•content-box： 从content区域开始显示背景。
lbackground-clip
•border： 从border区域向外裁剪背景。
•padding： 从padding区域向外裁剪背景。
•content： 从content区域向外裁剪背景。
•no-clip： 从border区域向外裁剪背景。
l实例：iphone开机动画
--------------------------------------------------------------------
遮罩
lMask-image
lMask-position
lMask-repeat
l实例：特殊形状的幻灯片效果
================================
注：
-ms-transform:rotate(7deg); //-ms代表ie内核识别码
-moz-transform:rotate(7deg); //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码
transform:rotate(7deg); //统一标识语句。。。最好这句话也写下去，符合w3c标准