CSS3新特性，兼容性，兼容⽅法总结
css3⼿册
边框
border-radius
⽤于添加圆⾓效果
语法:
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
<length>：⽤长度值设置对象的圆⾓半径长度。不允许负值
<percentage>：⽤百分⽐设置对象的圆⾓半径长度。不允许负值
实例:
border-radius:10px;
border-radius:5px 10px 15px 20px; //顺序是顺时针
border-radius:26px 106px 162px 32px/28px 80px 178px 26px; //标准语法格式
border-radius:50%; //是相对于元素占据尺⼨的百分⽐，即包含边框和padding后的尺⼨
.radius{
border-top-left-radius:5px;      //左上⾓，注意顺序是先上下后左右
border-top-right-radius:10px;    //左上⾓
border-bottom-left-radius:15px;  //左下⾓
border-bottom-left-radius:20px;  //右上⾓
background-color:red;  //即使元素没有边框，圆⾓也可以⽤到 background 上⾯，具体效果受 background-clip 影响。
}
兼容性：
IE9+,Firefox4+,Chrome5+,Safari5+,Opera01.5+,iOS Safari4+,Android Browser2.2+ ,Android Chrome18+
兼容⽅法：
低版本的chrome:-webkit-border-radius:10px;
低版本的firefox:-moz-border-radius:10px;
IE6/7/8：引⼊ie-css3兼容⽂件，不⽀持除了⿊⾊(#000)以外的其他颜⾊
详情参阅
详情参阅
rotate属性box-shadow
⽤于添加阴影效果
语法：
box-shadow：none|[inset? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]#
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
<offset-x>: 这是第⼀个 length值设置⽔平偏移量，如果是负值则阴影位于元素左边。
<offset-y>: 这是第⼆个 length值设置垂直偏移量，如果是负值则阴影位于元素上⾯。
<blur-radius>：这是第三个 length值。值越⼤，糊糊⾯积越⼤，阴影就越⼤越淡。 不能为负值。默认为0，此时阴影边缘锐利。<color>：设置对象的阴影的颜⾊。
实例：
box-shadow: 10px 10px 5px #888;
box-shadow: 3px 3px green, -1em 0 0.4em gold;
兼容性：
IE9.0+,Firefox4.0+,Chrome10.0+,Safari5.1+,Opera10.5+,iOS Safari5.0+,Android Browser4.0+,Android Chrome18.0+
兼容⽅法：
低版本的chrome:-webkit-box-shadow:10px 10px 5px #888;
低版本的firefox:-moz-box-shadow:10px 10px 5px #888;
IE6/7/8:
⽅法⼀:
filter:progid:dXImageTransform.Microsoft.DropShadow(color=#888888,offX=10,offY=10,positives=true);
缺点：阴影不能边缘模糊
⽅法⼆：
filter:progid:DXImageTransform.Microsoft.Shadow(color='#0099ff', Direction='120', Strength='10');
类似于投影效果，缺点：阴影不能边缘模糊
⽅法三(推荐)、引⼊ie-css3兼容⽂件behavior:url(ie-css3.htc)
缺点：不⽀持除了⿊⾊(#000)以外的其他颜⾊
详情参阅
详情参阅
border-image
⽤来给元素边框添加背景图⽚
语法：
border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> |
/ <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>
<' border-image-source '>：设置或检索对象的边框是否⽤图像定义样式或图像来源路径。
<' border-image-slice '>： 设置或检索对象的边框背景图的分割⽅式，该属性指定从上，右，下，左⽅位来分隔图像，将图像分成4个⾓，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除⾮加上关键字 fill。
<' border-image-width '>： 设置或检索对象的边框厚度。
<' border-image-outset '>：设置或检索对象的边框图像可超出边框盒的⼤⼩。
<' border-image-repeat '>：设置或检索对象的边框图像的平铺⽅式repeat,round,stretch。
实例：
border-image:url("www.w3school/i/border.png") 30 30 round;
border-image:url("www.w3school/i/border.png") 30 30 stretch;
兼容性：
IE11+, Firefox15+, Chrome16+ , Safari6+,Opera15+,iOS Safari6+,Android Browser4.4+, Android Chrome18+兼容⽅法：
低版本的chrome:-webkit-border-image:url("www.w3school/i/border.png") 30 30 stretch;
低版本的firefox:-moz-border-image:url("www.w3school/i/border.png") 30 30 stretch;
低版本的Opera:-o-border-image:url("www.w3school/i/border.png") 30 30 stretch;
IE未解决
详情参阅,
背景
background-size
设置背景图⽚⼤⼩。
语法：
background-size：<bg-size>#
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
<length>：⽤长度值指定背景图像⼤⼩。不允许负值。
<percentage>：⽤百分⽐指定背景图像⼤⼩。不允许负值。
auto：背景图像的真实⼤⼩。
cover：将背景图像等⽐缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等⽐缩放到宽度或⾼度与容器的宽度或⾼度相等，背景图像始终被包含在容器内。
实例：
background-size: cover;
background-size: contain;
兼容性：
IE9+,Firefox4+, Chrome15+,Safari7+, Opera15+, iOS Safari7+, Android Browser4.4+, Android Chrome18+
兼容⽅法：
低版本的chrome:-webkit-background-size:10px 10px 5px #888; //不⽀持background简写
低版本的firefox:-moz-background-size:10px 10px 5px #888;
IE8：
⽅法⼀(推荐)、引⼊backgroundsize.min.htc兼容⽂件
.size {
width: 400px;
height: 400px;
margin: 20px auto 0;
background:  green url(img/1.jpg) no-repeat scroll center 0;
background-size: cover;
-ms-behavior: url(js/backgroundsize.min.htc);
}
⽅法⼆、针对IE8的hack
<!--[if IE 8]>
<style type="text/css">
.size{
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/1.jpg', sizingMethod='scale')";
}
//该函数只能模仿cover值,IE8下效果与IE9/10稍有不同，图⽚占满背景⼤⼩且不超出
</style>
<![endif]-->
详情参阅
background-origin
指定背景图⽚background-image 属性的原点位置的背景相对区域，当使⽤ background-attachment 为fixed时，该属性将被忽略不起作⽤
语法：
background-origin：<box>#
<box> = border-box | padding-box | content-box
padding-box：从padding区域（含padding）开始显⽰背景图像。
border-box： 从border区域（含border）开始显⽰背景图像。
content-box：从content区域开始显⽰背景图像
实例：
background-origin:content-box;padding:10px;
111111111111111111111111111
background-origin:border-box;padding:10px;border:15px solid transparent;
111111111111111111
兼容性：
IE9+,Firefox4.0+ Chrome4.0+ Safari6.0+, iOS Safari6.0+, Android Browser3.0+, Android Chrome18+
兼容⽅法：
firefox4.0以下：-moz-background-origin:padding | border; //没有content
IE8下background-origin默认为padding-box
详情参阅
background-clip
设置元素的背景（背景图⽚或颜⾊）是否延伸到边框下⾯。
语法：
background-clip：<box>#
<box> = border-box | padding-box | content-box | inherit
border-box背景延伸到边框外沿（但是在边框之下）。
padding-box边框下⾯没有背景，即背景延伸到内边距外沿。
content-box背景裁剪到内容区 (content-box) 外沿。
实例：
background-clip:border-box;
111111*********
兼容性：
IE9+,Firefox4.0+, Chrome4.0+, Safari6.0+,iOS Safari6.0+, Android Browser3.0+, Android Chrome18.0+
兼容⽅法：
firefox4.0以下：-moz-background-clip:padding | border; //没有content
IE8下background-clip默认为padding-box
multiple backgrounds
语法：
background：[<bg-layer>,]*<final-bg-layer><bg-layer>=<bg-image>||<position>[/<bg-size>]?||<repeat-style>||<attachment>||<box>||<box><final-bg-layer>=<bg-im 实例：
background:
url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;
兼容性：
IE9+,Firefox3.6+, Chrome4.0+, Safari3.1+
兼容⽅法：
未解决
⽂本
text-shadow
为⽂字添加阴影
语法：
textshadow：none | [inset? && [ <offset-x> <offset-y> <blur-radius>?<color>? ] ]#
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
<offset-x>: 这是第⼀个 length值设置⽔平偏移量，如果是负值则阴影位于元素左边。
<offset-y>: 这是第⼆个 length值设置垂直偏移量，如果是负值则阴影位于元素上⾯。
<blur-radius>：这是第三个 length值。值越⼤，糊糊⾯积越⼤，阴影就越⼤越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<color>：设置对象的阴影的颜⾊。
实例：
text-shadow:1px 1px 2px red;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。