imovies
当前位置:首 页>> 百 宝 箱 >>关于 CSS3 唠叨一下

关于 CSS3 唠叨一下

  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;
}
微信支付宝

标 签:CSSCSS3W3C

评 论0 引 用0 浏 览3388

上一篇你“小康”了吗?

下一篇Paramount 100th anniversary:派拉蒙100周年

说点什么:

正文内容:

 

图片博文

扫一扫分享之

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。