css3渐变、背景、倒影、变形

一、背景切割background-clip

• 语法：background-clip：border-box | padding-box | content-box；
• border-box      超出border外的背景割掉
• padding-box   超出padding外的背景割掉
• content-box    超出content外的背景割掉

 

二、背景原点（定义起点或中心点）background-origin

• 语法：background-origin：border-box | padding-box | content-box；
• border-box      图片以border左上角的角为起点
• padding-box   图片以padding最左上角的角为起点
• content-box    图片以内容范围最左上角的角为起点

三、背景尺寸background-size

• 根据图像的真实像素  background-size：100px 200px；
• 百分比是相对于容器来铺（content+padding）  background-size：100% 100%；
• 是原来背景图片的真实大小  background-size：auto；
• 会撑满容器，但是会一些背景溢出  background-size：cover；
• 不会撑满容器  background-size：contain；

 

四、渐变

• 线性渐变：没规定方向时是由上到下（默认）；规定角度时，0度是由左到右，角度是逆时针变化的。
• 语法：background：-webkit-linear-gradient（水平起点 垂直起点/角度 ， 颜色1  百分比1 ， 颜色2  百分比2 ， 颜色n 百分比n）；百分比可以换成像素
• 例子：
• 当变为-webkit-repeating-linear-gradient 时为重复
• 例子：
• 径向渐变：没规定方向时是有中间向外（默认）；规定角度时，0度是由左到右，角度是逆时针变化的。
• 语法：background： -webkit-radial-gradient（水平起点 垂直起点/角度 ， 颜色1  百分比1 ， 颜色2  百分比2 ， 颜色n 百分比n）；百分比可以换成像素
• 参数与线性渐变相同，只不过多了一个可选参数——形状（ellipse（椭圆） | circle（圆））；一般默认为椭圆
• 例子：

 

• IE滤镜：

filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ff0000, endColorstr=#010101)";

 +background:#f9f9f9;

 

五、遮罩（蒙版）mask

• -webkit-mask-image：url/gradient；  放置蒙版层
• -webkit-mask-repeat：repeat | repeat-x | repeat-y | no-repeat；
• -webkit-mask-position：x  y；   蒙版移动位置
• 例子：

 

---

六、倒影（reflect）

• -webkit-box-reflect：位置  间距  可以渐变（可选）；
• 位置：above（倒影在对象的上边），below（下边），left（左面），right（右面）
• 间距：像素值
• 例子：

 

七、旋转（rotate）——2D旋转

• 语法：
• -webkit-transform：rotate（角度）；  顺时针旋转
• -webkit-transform-origin：X轴位置   Y轴位置；
• 作用：旋转中心点
• 位置可以是：left | right | top | bottom | 像素 | 百分比
• 例子：

• 

 

八、移动（translate）

• 语法：
• -webkit-transform：translate（X轴移动位置  Y轴移动位置）；
• -webkit-transform：translateX（length）； 只是X轴移动
• -webkit-transform：translateY（length）； 只是Y轴移动
• 例子：

 

九、缩放scale——2D缩放

• -webkit-transform：scale（X轴缩放倍数  Y轴缩放倍数）；
• -webkit-transform：scaleX（number）；  只缩放X轴
• -webkit-transform：scaleY（number）；  只缩放Y轴
• 例子：

 

十、扭曲skew（逆时针）

• -webkit-transform：skew（X轴扭曲角度，Y轴扭曲角度）；
• -webkit-transform：skewX（angle）；  按照X轴进行扭曲
• -webkit-transform：skewY（angle）；  按照Y轴进行扭曲
• 例子：

 

注意：六~十为变形，不同的顺序有不一样的效果。分先后变换