5个实例让你轻松了解CSS3新属性

正如你看到的，我们给每一个div标签设置了300px的宽和300px的高。同时给它们定义了float:left（左浮动）让它们显示在一排。

二、圆角

创建圆角效果稍微有点麻烦。首先，你先设计这个圆角效果图片，然后，创建多个结构标签，把圆角图片分别定义在相应的结构里面。这个步骤你是了解的。

这个效果用css3的新属性“border-radius”来做就很简单了，我们先创建div标签并定义黑色背景和黑边。这个border是必须的，因为我们通过这个border边来让border-radius属性生效。

代码如下：

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

刷新页面，你就可以看到一个宽高为300px的黑色、正方形的div。现在，我们开始来实现这个圆角的效果。仅仅需要添加2行代码就可以了。

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

正如你所看到的，我们添加了2行几乎相同的代码，唯一不同的地方就是”-moz”和”-webkit”。-moz主要是针对firefox浏览器的，-webkit则是Safari（苹果）/Google Chrome（谷歌）浏览器的。
刷新你的页面，在firefox（火狐）和Safari（苹果）浏览器里面是你可以看到平滑的圆角div，而在Chrome（谷歌）浏览器里面稍微会有点锯齿的边。

回到代码里面，修改border-radius的值，可以修复圆角有锯齿的情况。border-radius的值越大圆角越平滑，就像在photoshop里面的那样。据我所知，这个元素没有最大值。

三、个性圆角

制作传统的圆角将花费你大量的时间，庆幸的是，css3可以轻而易举的解决它。

这个属性有点类似于我们前面例子，也是使用css3的border-radius属性，然而，我们要对这个代码做一些小的修改。
代码如下：

1. #indie {
2. background-color: #000;
3. border: 1px solid #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. }
   

我们在代码里面添加了”topright”和”bottomRight”，它涉及到div元素的右上圆角和右下圆角。使用这些代码你可以轻易的实现标签似的效果

四、css3的新属性改变透明度

目

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!