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 圆角的代码

 
 

  
  <divclass=”windows”>

  
  
<bclass=”xtop”>


  
  
<bclass="xb1"/>


  
  
<bclass="xb2"/>


  
  
<bclass="xb3"/>


  
  
<bclass="xb4"/>


  
  
</b>


  
  
<divid=”xcontent”>


  
  
<h2>框标题</h2>


  
  
<p>这是一个带圆角的框</p>


  
  
</div>


  
  
<bclass=”xbottom”>


  
  
<bclass="xb4"/>


  
  
<bclass="xb3"/>


  
  
<bclass="xb2"/>


  
  
<bclass="xb1"/>


  
  
</b>


  
  
</div>

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

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

 
 

  
  .xtop,.xbottom{ 

  
  font-size:1px; 

  
  display:block; 

  
  } 

  
  .xb1{ 

  
  background:#0088CCnonerepeatscroll00; 

  
  margin:05px; 

  
  } 

  
  .xb1,.xb2,.xb3{ 

  
  height:1px; 

  
  } 

  
  .xb1,.xb2,.xb3,.xb4{ 

  
  display:block; 

  
  overflow:hidden; 

  
  } 

  
  .xcontent{ 

  
  border-color:#0088CC; 

  
  border-style:solid; 

  
  border-width:01px; 

  
  display:block; 

  
  } 

  
  .windowsh2{ 

  
  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:0015px#C7C7C7; 

  
  font-weight:bold; 

  
  }

效果见图3-25。

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

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

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

CSS 3的世界很精彩

猜你喜欢