思洋互动网站建设学前班

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. }  

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