CSS 3的世界很精彩

3.5  接触未来（二）—CSS 3的世界很精彩

层叠样式表（Cascading Style Sheets，CSS）的出现已经有13年时间了，目前已被广泛使用的CSS 2.1标准的出现也有11年了，CSS 2.1 在浏览器兼容性上也产生了针对浏览器解析CSS Bug的Hack技术，现在是时候引入CSS 3了。不要害怕兼容性，也不要害怕你的设计，让客户知道引入CSS 3的好处，让旧的浏览器消失，现代浏览器具有更丰富的功能，你要为兼容性的设计付出更高的成本来进行调试。接下来，我们看看CSS 3的优势和其在开发中使用的一些例子，看看使用CSS 3的一些新功能是否也能像使用HTML 5一样让我们的工作变得简单。

首先，回想一下在CSS 2中要完成几项样式时需要什么样的结构及样式表。

1．圆角

你的网站是Web 2.0的吗？那没圆角怎么行？这是在Web 2.0类网站当中经常出现的一种简单视觉判别。当然，是否是Web 2.0并不是由有没有使用圆角或渐变图案来界定的，但它的使用非常广泛，在各种CSS设计书中也会提到圆角的设计技巧。有些圆角设计基本背离了HTML是 一门结构语言的本意，增加了无关紧要的标记来完成圆角这个非常基本的样式。下面的例子使用了纯CSS来实现圆角，见代码清单3-9。

代码清单3-9  圆角的代码

<div class=”windows”>
<b class=”xtop”>
<b class="xb1"/>
<b class="xb2"/>
<b class="xb3"/>
<b class="xb4"/>
</b>
<div id=”xcontent”>
<h2>框标题</h2>
<p>这是一个带圆角的框</p>
</div>
<b class=”xbottom”>
<b class="xb4"/>
<b class="xb3"/>
<b class="xb2"/>
<b class="xb1"/>
</b>
</div>

相应的CSS见代码清单3-10。

代码清单3-10  圆角实现的CSS代码

.xtop, .xbottom{
font-size:1px;
display:block;
}
.xb1 {
background:#0088CC none repeat scroll 0 0;
margin:0 5px;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xcontent{
border-color:#0088CC;
border-style:solid;
border-width:0 1px;
display:block;
}
.windows h2{
font-size:2.5em;
}

上面的代码复杂吗？其实也不会很复杂，要实现圆角还有很多种方式，有的还应用到了JavaScript。但作为标准的网站，这样的结构不能满足开发 规范，设计师往往会感到无奈。CSS 3中实现圆角的操作复杂吗？只需要对某一元素加上border-radius即可。这样就行了吗？

其实还有一点让人讨厌的地方，CSS 3目前也还是草案，所以各浏览器在支持上也有各自的扩展，并不统一，需要加上对不同内核浏览器的定义：基于WebKit的（如Safari、 Chrome）加上-webkit-border-radius；基于Gecko的（如Firefox）加上-moz-border-radius。浏览 器扩展使用“-”或“_”开头，后面带上属性名称即可，但在正式发布标准时，还是应该避免使用这样的扩展。圆角的例子中如果有需要，还要对4个圆角进行控 制，即左上角topleft、右上角topright、左下角bottomleft和右下角bottomright。完整代码见代码清单3-11。

代码清单3-11  各种不同的实现

/* Gecko 内核 */
-moz-border-radius-topleft：20px;
-moz-border-radius-topright：0;
-moz-border-radius-bottomleft：0;
-moz-border-radius-bottomright：20px;
/* Webkit 内核 */
-webkit-border-topp-left-radius：20px;
-webkit-border-top-right-radius：0;
-webkit-border-bottom-left-radius:0;
-webkit-border-bottom-right-radius：20px;
/* W3C 语法 */
border-top-left-radius：20px;
border-top-right-radius：0;
border-bottom-right-radius：0;
border-bottom-left-radius： 20px;

2．阴影

CSS阴影效果在CSS 2时就已经出现了，只是当时只有Safari一种浏览器支持，所以要实现阴影效果一般是采用图片来替代。CSS 3中的阴影可以用在边框及文字上，写法如下：

边框阴影：box-shadow x轴 y轴 阴影长度 着色

文字阴影：text- shadow x轴 y轴 阴影长度 着色

在目前的草案实现上，需要加上各浏览器内核前缀，简单的例子如下：

.textShadow：{
font-size:：46px;
color：#A30B0B ：
text-shadow:0 0 15px #C7C7C7;
font-weight: bold;
}

效果见图3-25。

（点击查看大图）图3-25  CSS 3的阴影效果

以上仅举了两个例子说明目前CSS 2与CSS 3的本质区别。CSS 3将工作简单化了，之前需要很多种技巧实现的效果，现在可以直接以样式表属性进行表现。从CSS 3的整个技术概览上看，总共分为4类变化：选择器、布局、样式、动画。下文将一一介绍。

 

书籍：大巧不工：Web前端设计修炼之道