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

css3-特性

时间:2017-07-25 10:13:13      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:over   pre   线性   chm   背景图片   image   对象   边框   缩放   

背景ie9+

background-size  为背景图片定义宽高

  cover  铺满背景区域,多余的裁切

  contain  缩放图片完全显示出来,背景大小不符合有留白

  px  em  %

注:如果自定义则传递两个参数,background-attachment为fixed时无效

ie7 8兼容写法:filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘../img/justice.jpg‘,sizingMethod=‘scale‘);

  src  路径

  sizingMethod  crop  剪切图片以适应对象尺寸  image  默认值,增大或减小对象的尺寸边界以适应图片的尺寸  scale  缩放图片以适应对象的尺寸边界

background-origin  为背景图片定义覆盖区域

background-clip  为背景颜色定义覆盖区域

  border-box  覆盖至border区域

  padding-box  覆盖至padding区域

  content-box  覆盖至内容区域

多背景

1 background: url("img/s1.jpg") no-repeat center top,
2                     url("img/s2.jpg") no-repeat center bottom;
3 
4 background-image: url("img/s1.jpg"), url("img/s2.jpg");
5 background-repeat: no-repeat, no-repeat;
6 background-position: center top, center bottom;

渐变ie10+

线性渐变

background-image: linear-gradient();

 

径向渐变

 

兼容

 

文本

 

边框

 

过度

 

23D转化

 

动画

 

多列

 

弹性盒子

 

滤镜

 

css3-特性

标签:over   pre   线性   chm   背景图片   image   对象   边框   缩放   

原文地址:http://www.cnblogs.com/yiku/p/7231911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!