`
desert3
  • 浏览: 2139365 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

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

    博客分类:
  • Html
 
阅读更多
相关CSS圆角属性:
border-radius:CSS3标准属性
-moz-border-radius:Firefox用来显示圆角的属性
-webkit-border-radius:Chrome、Safari用来显示圆角的属性
/* css圆角属性 */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;


参考MDN:Mozilla开发者网络 - border-radius中关于CSS3属性border-radius的浏览器兼容性可知:
IE9、Firefox 4.0(Gecko2.0)、Chrome4.0(WebKit)、Opera10.5、Safari5. 0(WebKit)开始都已经支持标准的border-radius属性

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

即对于浏览器:FF4.0+、Chrome4.0+、Opera10.5+、Safari5+、IE9.0+,都直接支持CSS3标准属性border-radius而无需使用各浏览器自己定制的属性了

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



相关CSS阴影属性:
box-shadow:CSS3标准属性,多个阴影属性之间可以用逗号分隔
-moz-box-shadow:Firefox用来显示阴影的属性
-webkit-box-shadow:Chrome、Safari用来显示阴影的属性
/* css阴影属性 */
-webkit-box-shadow:  0 1px 2px red;
-moz-box-shadow:  0 1px 2px blue;
box-shadow: 0 1px 2px green;


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

  where <shadow> is defined as:

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

  • inset:内部阴影,默认是外部阴影
  • offset-x:水平偏移
  • offset-y:垂直偏移
  • blur-radius:模糊度
  • spread-radius:伸展度?
  • color:颜色

参考MDN:Mozilla开发者网络 - box-shadow中关于CSS3属性box-shadow的浏览器兼容性可知:
IE9、Firefox 4.0(Gecko2.0)、Chrome10(WebKit)、Opera10.5、Safari5. 1(WebKit)开始都已经支持标准的box-shadow属性

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

即对于浏览器:FF4.0+、Chrome10.0+、Opera10.5+、Safari5.1+、IE9.0+,都直接支持CSS3标准属性box-shadow而无需使用各浏览器自己定制的属性了

参考:
CSS3属性之二:box-shadow
MDN - box-shadow属性

text-shadow:文字阴影
https://developer-new.mozilla.org/en-US/docs/CSS/text-shadow

text-overflow:文本裁剪省略
https://developer-new.mozilla.org/en-US/docs/CSS/text-overflow
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics