CSS3 圆角属性border-radius、边框阴影属性box-shadow、文字阴影text-shadow、文本裁剪省略text-overflow...

最新推荐文章于 2024-03-20 14:24:28 发布

desert3

最新推荐文章于 2024-03-20 14:24:28 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

分类专栏： Html

本文链接：https://blog.csdn.net/desert3/article/details/84266784

Html 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了CSS3中的圆角和阴影属性，包括border-radius和box-shadow的使用方法及浏览器兼容性。阐述了不同浏览器如何支持这些特性，并提供了具体示例。

[b]相关CSS圆角属性：[/b]
[b]border-radius[/b]：CSS3标准属性
[b]-moz-border-radius[/b]：Firefox用来显示圆角的属性
[b]-webkit-border-radius[/b]：Chrome、Safari用来显示圆角的属性


/* css圆角属性 */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;

参考[url=https://developer-new.mozilla.org/en-US/docs/CSS/border-radius]MDN:Mozilla开发者网络 - border-radius[/url]中关于CSS3属性border-radius的浏览器兼容性可知：
[b]IE9、Firefox 4.0(Gecko2.0)、Chrome4.0(WebKit)、Opera10.5、Safari5. 0(WebKit)[/b]开始都[color=red]已经支持标准的border-radius属性[/color]。

如果要使小于4.0的Firefox支持圆角，那么要使用属性[b]-moz-border-radius[/b]
如果要使小于4.0的Chrome或者小于5.0的Safari支持圆角，那么要使用属性[b]-webkit-border-radius[/b]

即对于浏览器：FF4.0+、Chrome4.0+、Opera10.5+、Safari5+、IE9.0+，[color=red]都直接支持CSS3标准属性border-radius而无需使用各浏览器自己定制的属性了[/color]。

参考：
[url=http://www.css3.info/preview/rounded-border/]Border-radius: create rounded corners with CSS![/url]
[url=http://www.w3.org/TR/css3-background/
]W3C Backgrounds and Borders Specification[/url]

[b]相关CSS阴影属性：[/b]
[b]box-shadow[/b]：CSS3标准属性，[color=red]多个阴影属性之间可以用逗号分隔[/color]
[b]-moz-box-shadow[/b]：Firefox用来显示阴影的属性
[b]-webkit-box-shadow[/b]：Chrome、Safari用来显示阴影的属性


/* css阴影属性 */
-webkit-box-shadow:  0 1px 2px red;
-moz-box-shadow:  0 1px 2px blue;
box-shadow: 0 1px 2px green;

[b]语法：[/b]


box-shadow:  none | <shadow> [,<shadow>]*

  where <shadow> is defined as:

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

[list]
[*]inset：内部阴影，默认是外部阴影
[*]offset-x:水平偏移
[*]offset-y:垂直偏移
[*]blur-radius:模糊度
[*]spread-radius:伸展度？
[*]color:颜色
[/list]
参考[url=https://developer-new.mozilla.org/en-US/docs/CSS/box-shadow]MDN:Mozilla开发者网络 - box-shadow[/url]中关于CSS3属性box-shadow的浏览器兼容性可知：
[b]IE9、Firefox 4.0(Gecko2.0)、Chrome10(WebKit)、Opera10.5、Safari5. 1(WebKit)[/b]开始都[color=red]已经支持标准的box-shadow属性[/color]。

如果要使小于4.0的Firefox支持阴影，那么要使用属性[b]-moz-box-shadow[/b]
如果要使小于10.0的Chrome或者小于5.1的Safari支持圆角，那么要使用属性[b]-webkit-box-shadow[/b]

即对于浏览器：FF4.0+、Chrome10.0+、Opera10.5+、Safari5.1+、IE9.0+，[color=red]都直接支持CSS3标准属性box-shadow而无需使用各浏览器自己定制的属性了[/color]。

参考：
[url=http://www.cnblogs.com/lianjun/archive/2011/03/14/1983465.html]CSS3属性之二：box-shadow[/url]
[url=https://developer-new.mozilla.org/en-US/docs/CSS/box-shadow]MDN - box-shadow属性[/url]

[b]text-shadow：文字阴影[/b]
[url]https://developer-new.mozilla.org/en-US/docs/CSS/text-shadow[/url]

[b]text-overflow：文本裁剪省略[/b]
[url]https://developer-new.mozilla.org/en-US/docs/CSS/text-overflow[/url]