关于 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 浏览266

上一篇 << 你“小康”了吗？ 　|　 下一篇 >> Paramount 100th anniversary：派拉蒙100周年

引用地址:


图片博文
崔健 - 花房姑娘点击查看原图，原图模式下ESC键退出。
说点什么：

正文内容：

　


© 2001-2012 dvxj.com All Right Reserved.　新ICP备10202385号　中国·新疆·乌鲁木齐
Blog style designed by xajh  Powered by emlog
关于我&博客｜隐私及版权声明｜留言板｜与我联系 人到穷途应一笑，几凡失意仍能傲。成败何须问江湖，我心依旧任逍遥。