码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2015-06-09 13:31:36      阅读：235      评论：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年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！