首页 > Web开发 > 详细

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

时间：2015-06-09 13:29:51 阅读：195 评论：0 收藏：0 [点我收藏+]

一、背景切割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轴进行扭曲
例子：

技术分享

技术分享

技术分享

技术分享

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

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

原文：http://www.cnblogs.com/pan-hello/p/4563076.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

最新文章

更多>

教程昨日排行

更多>

友情链接

汇智网 PHP教程插件网

关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com

© 2014 bubuko.com 版权所有

打开技术之扣，分享程序人生！