当前位置:Gxlcms > html代码 > CSS3新特性,兼容性,兼容方法总结_html/css_WEB-ITnose

CSS3新特性,兼容性,兼容方法总结_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:23人阅读

CSS3新特性,兼容性,兼容方法总结

css3手册 css3手册

边框

border-radius

用于添加圆角效果

语法:

border-radius:[ | ]{1,4} [ / [ | ]{1,4} ]?

: 用长度值设置对象的圆角半径长度。不允许负值

: 用百分比设置对象的圆角半径长度。不允许负值

实例:

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)以外的其他颜色

详情参阅 让IE6/IE7/IE8浏览器支持CSS3属性

详情参阅 border-radius

box-shadow

用于添加阴影效果

语法:

box-shadow:none|[inset? && [???]]#

inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

: 这是第一个 length值设置水平偏移量,如果是负值则阴影位于元素左边。

: 这是第二个 length值设置垂直偏移量,如果是负值则阴影位于元素上面。

:这是第三个 length值。值越大,糊糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。

:设置对象的阴影的颜色。

实例:

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:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色

详情参阅 让IE6/IE7/IE8浏览器支持CSS3属性

详情参阅 box-shadow

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("http://www.w3school.com.cn/i/border.png") 30 30 round;

border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 stretch;

兼容性:

IE11+, Firefox15+, Chrome16+ , Safari6+,Opera15+,iOS Safari6+,Android Browser4.4+, Android Chrome18+

兼容方法:

低版本的chrome: -webkit-border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 stretch; 低版本的firefox: -moz-border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 stretch; 低版本的Opera: -o-border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 stretch;

IE未解决

详情参阅 border-image , border-image

背景

background-size

设置背景图片大小。

语法:

background-size:# = [ | | auto ]{1,2} | cover | contain

: 用长度值指定背景图像大小。不允许负值。

: 用百分比指定背景图像大小。不允许负值。

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

    详情参阅 background-size

background-origin

指定背景图片background-image 属性的原点位置的背景相对区域,当使用 background-attachment 为fixed时,该属性将被忽略不起作用

语法:

background-origin:# = 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-origin

background-clip

设置元素的背景(背景图片或颜色)是否延伸到边框下面。

语法:

background-clip:# = border-box | padding-box | content-box | inherit

border-box背景延伸到边框外沿(但是在边框之下)。

padding-box边框下面没有背景,即背景延伸到内边距外沿。

content-box背景裁剪到内容区 (content-box) 外沿。

实例:

background-clip:border-box;

111111111111111

兼容性:

IE9+,Firefox4.0+, Chrome4.0+, Safari6.0+,iOS Safari6.0+, Android Browser3.0+, Android Chrome18.0+

兼容方法:

firefox4.0以下: -moz-background-origin:padding | border; 没有content

IE8下background-origin默认为padding-box

multiple backgrounds

语法:

background:[ , ]* = || [ / ]? || || || || =||[/]?||||||||||<'background-color'>

实例:

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? && [ ?? ] ]#

inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

: 这是第一个 length值设置水平偏移量,如果是负值则阴影位于元素左边。

: 这是第二个 length值设置垂直偏移量,如果是负值则阴影位于元素上面。

:这是第三个 length值。值越大,糊糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。

:设置对象的阴影的颜色。

实例:

text-shadow:1px 1px 2px red;

12212121

兼容性:

IE10+, Firefox3.5+, Chrome4.0+, Safari6.0+

兼容方法:

低版本的chrome: -webkit-text-shadow:1px 1px 1px #000; 低版本的firefox: -moz-text-shadow:1px 1px 1px #000;

IE6/7/8:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色

详情参阅 让IE6/IE7/IE8浏览器支持CSS3属性

word-wrap

浏览器是否允许单词中断换行

word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap

当你使用 <' overflow-wrap '> 时,最好同时使用 <' word-wrap '> 作为备选,作向前兼容。

语法:

word-wrap:normal | break-word

实例:

word-wrap: break-word;

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

兼容性:

IE6+,Firefox3.5+, Chrome4+, Safari6+, iOS Safari6+, Android Browser2.1+, Android Chrome18+

兼容方法:

文字

@font-face

能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。

语法:

@font-face {    font-family: ;    src:  [][, []]*;    [font-weight: ];    [font-style: