正在阅读：CSS3系列教程CSS3系列教程

　　尽管把玩CSS3是很有趣的事情--就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如果你要在你的网站中使用CSS3，请确认有针对不支持CSS3的浏览器的兼容方法。

　　CSS3的浏览器支持状况：
　　√ Firefox (3.05+…部分支持)
　　√ Google Chrome (1.0.154+…部分支持)
　　√ Google Chrome (2.0.156+…较好支持)
　　× Internet Explorer (IE7, IE8 不支持)
　　√ Opera (9.6+…很少支持)
　　√ Safari (3.2.1+ windows…较好支持)

　　什么是CSS，什么是CSS3？

　　非常简单，CSS代表"Casading Style Sheets"，就是样式表，是一种替代并为网站添加样式的标记性语言。CSS3只是表示下一代CSS，3只是版本号。
　　如果CSS3还没有完全被支持，那么我为什么要写CSS3呢？
　　因为学习新东西时间很有趣的事情！
　　而且有人常常问我如何实现圆角。我解释了很多遍如何使用图片或CSS3实现，这里我通过写一些我学到的一些东西的方式来希望能够帮助其他的有需要的人。
　　当然你也不必只看我说的。Eric Meyer是一个了解CSS很多的传奇人物，这里有个 很棒的对Eric的访谈 ，讨论CSS3，很值得一读。
　　测试，我特别制作了一个关于本系列教程的 测试页面。所有本系列教程所讨论的内容，在该测试页面都有演示，你也可以访问该页面，来测试一下自己的浏览器是否支持CSS3。
　　页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。

　　跨浏览器兼容性

　　前缀：
　　-moz(例如 -moz-border-radius)用于Firefox
　　-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

　　CSS3圆角（所有的）
　　不使用图片来实现圆角曾经是很流行的能力，创建那些完美的小圆角图片，用做适当的CSS背景，是非常费时的工作。现在，使用CSS3，我们可以用几行代码来创建圆角。

图1

　　这是一个5px普通边框和15px边框半径的设置：

　　#roundCorderC{
　　font-family: Arial;
　　border: 5px solid #dedede;
　　-moz-border-radius: 15px;
　　-webkit-border-radius: 15px;
　　padding: 15px 25px;
　　height: inherit;
　　width: 590px;
　　}

　　浏览器支持:
　　√ Firefox(3.05+…)
　　√ Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8)
　　× Opera 9.6
　　√ Safari(3.2.1+ windows)

　　CSS3圆角(个别的)

　　当然，一个DIV的四个角不需要全部都是圆角，你可以个别的实现圆角。

　　#roundCornerI{
　　font-family: Arial;
　　border: 5px solid #dedede;
　　-moz-border-radius-topleft: 15px;
　　-moz-border-radius-topright: 0px;
　　-moz-border-radius-bottomright: 15px;
　　-moz-border-radius-bottomleft: 0px;
　　-webkit-border-top-left-radius: 15px;
　　-webkit-border-top-right-radius: 0px;
　　-webkit-border-bottom-left-radius: 0px;
　　-webkit-border-bottom-right-radius: 15px;
　　padding: 15x 25px;
　　height: inherit;
　　width: 590px;
　　}

　　浏览器支持:
　　√ Firefox(3.05+…)
　　√ Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8)
　　× Opera 9.6
　　√ Safari(3.2.1+ windows)

　　现在我们来看一看如何为边框的border-color添加更多的色彩。
　　使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到剩下的宽度。

　　浏览器兼容性

　　目前只有Firefox支持CSS3 border-colour属性，所以我们这里只需使用-moz前缀。
　　所有本系列关于CSS3的文章都会及时更新，以跟踪浏览器的兼容性。

　　CSS3中的边框颜色：

图2

　　这里是一个10px宽的标准边框和边框颜色：

　　#borderColor {
　　border: 10px solid #dedede;
　　-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
　　-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
　　-moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
　　-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
　　padding: 15px 25px;
　　height: inherit;
　　width: 590px;
　　}

　　浏览器支持：
　　√ FireFox (3.0.5)
　　× Google Chrome (1.0.154+)
　　× Google Chrome (2.0.156+)
　　× Internet Explorer (IE7/IE8 RC1)
　　× Opera (9.6)
　　× Safari (3.2.1, Windows)