关于 CSS3 唠叨一下

[ 作者:笑傲江湖 发布于:2011年-12月-21日 16:38 星期三  分类:百 宝 箱 ]

  CSS3 说白了就是 CSS2+新增规范,当然也是向下兼容CSS2的,不用担心浏览器的显示问题。CSS3虽然也出来有段时间了,但这些新增规范依然还在W3C的不断完善和发展之中,所以有些新属性不是所有的浏览器都支持,或者是同一个浏览器的不同版本也会有差异,当然,最烂的就是盖茨大叔家的IE系列了,支持的最好的是IE9了,IE10还没用,估计不会差哪里去,其他浏览器,比如新版的Chrome、Firefox、Opera、Safari,基本都支持的不错。
  正是由于新属性不是所有浏览器都支持,尤其是IE9以下版本的浏览器,所以一直没去仔细研究那些新增的规范,更何况在咱这IE6大行其道的地方,很多CSS2的东西都显示的不咋地,CSS3就别想这么多了,除非全中国上网的人们都换成IE10,或者新版的Chrome、Firefox、Opera、Safari,否则这CSS3只能自己看了。比如,俺博客文章的标题是有阴影的,IE浏览器是看不到的,圆角的边框博客倒是没有用,如果用了,IE6/7/8也是看不到的,还是显示直角的边框,IE9是可以看到的。
下面就说说之前觉得有用的几个新属性。

CSS3 Borders 新的边框定义里面,可以设置圆角了,也可以设置阴影,同时边框还支持显示图片,IE9及以上版本才能看见效果,IE8是不支持的。
border-radius 边框圆角大小
box-shadow 边框的阴影
border-image 边框图片 (IE9不支持)
语法:
p {
border-radius:25px;
box-shadow: 5px 5px 5px #FF0000;
/*参数:阴影水平位移距离,垂直位移距离,阴影模糊大小,阴影颜色*/
}
CSS3 Text Effects 文字效果,可以给文字增加阴影了,可惜IE9也不支持,IE8就别想了。
text-shadow 文字阴影
语法:
p {
text-shadow: 5px 5px 5px #FF0000;
/*参数:阴影水平位移距离,垂直位移距离,阴影模糊大小,阴影颜色*/
}
CSS3 Multiple Columns 文字分栏,可以给文字块设置分栏,可惜IE6-9不支持,让我怎么说你好啊,盖茨大叔。
column-count 栏数
column-gap 栏间距
column-rule 栏样式:宽度、颜色等风格样式设置
语法:
div {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

微信支付宝

标签: CSS CSS3 W3C

评论0 引用0 浏览2706

说点什么:

正文内容:

 




图片博文
一个或多个 ActiveX 控件无法显示12周年纪念