0 Comments

解读五大CSS3新技术用法(2)

发布于:2013-11-01  |   作者:广州网站建设  |   已聚集:人围观

2:圆角

目前而言,创建圆角的方法有很多,但都很麻烦。最常用的方法:首先,你要创建圆角的图片;然后,你要创建很多html元素并使用背景图像的方式显示圆角。具体流程你我都很清楚。

这个问题将在CSS3中很简单的解决掉,那就是叫做“border-radius”的属性。我们先创建一个黑色的div元素并给他设置黑色的边框。边框就是要实现“border-radius”属性效果的前提。
像这样:
广州网站建设,网站建设,广州网页设计,广州网站设计


  1. #round{  
  2. background-color:#000;  
  3. border:1pxsolid#000;  
  4. }  
  5.  

现在你已经创建了div元素,它看起来和你预期的样子一样,300px款和高有楞有角且是黑色的。下面我们来添加实现圆角的代码,它是如此的简洁,仅仅需要两行代码。


  1. #round{  
  2. background-color:#000;  
  3. border:1pxsolid#000;  
  4. -moz-border-radius:10px;  
  5. -webkit-border-radius:10px;  
  6. }  
  7.  

在这里,我们添加了两行类似的代码,-moz-适用于Firefox浏览器,而-webkit-则是用于Safari/Chrome浏览器。 注:目前为止IE浏览器不支持border-radius属性,所以如果想让IE也有圆角效果,那么就要单独添加圆角了。 border-radius这个属性直译过来是边框半径的意思,就如同Photoshop一样,它的值越大,圆角也就越大。

3:个别的圆角

如果按照过去的习惯做法,会浪费你很多时间,现在CSS3能快速解决!我们现在只想让div的右上和右下是圆角,那么仅需稍作修改:


  1. #indie{  
  2. background-color:#000;  
  3. border:1pxsolid#000;  
  4. -moz-border-radius-topright:10px;  
  5. -moz-border-radius-bottomright:10px;  
  6. -webkit-border-top-left-radius:10px;  
  7. -webkit-border-bottom-left-radius:10px;  
  8. }  
  9.  

试想一下这种做法会用在网页中的什么元素呢?对!就是标签式的导航按钮!
广州网站建设,网站建设,广州网页设计,广州网站设计

4:以CSS3的方式修改不透明度

现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。 这行代码很好记,仅仅是“opacity:value;”:


  1. #opacity{  
  2. background-color:#000;  
  3. opacity:0.3;  
  4. }  
  5.  
标签:
飞机