-webkit-border-radius：苹果； 微软，还有其他浏览器，因为它们都使用了webkit内核；
-moz-border-radius：moz属性主要是支持MozillaFirefox Maxthon浏览器的CSS属性。
当这两个属性具有值时，删除该属性将对使用它们作为内核的浏览器产生影响。 如果它们没有价值css圆角属性，那么它们就没有作用。 如果不删除css圆角属性，影响可以忽略不计。
border-radius：使用该属性可以达到圆角边框的效果。
目前只有 Mozilla/Firefox 和 Safari3 支持此属性。 请参阅下面的示例代码：
复制代码
代码如下所示：
Mozilla/Firefox 和 Safari 3 用户将在此处听到圆形边框
据悉，设计者还可以随意指定圆角的位置，四个方向：左上、左下、右上、右下。 在mozilla/firefox和safari中的具体书写格式如下：
-moz-border-radius-topleft/-webkit-border-top-left-radius
-moz-border-radius-topright/-webkit-border-top-right-radius
-moz-border-radius-bottomleft/-webkit-border-bottom-left-radius
-moz-border-radius-bottomright/-webkit-border-bottom-right-radius
Mozilla/Firefox 和 Safari3 中看到的左上角圆角
Mozilla/Firefox 和 Safari3 中看到的右上角圆角
Mozilla/Firefox 和 Safari3 中看到的左下圆角
Mozilla/Firefox 和 Safari3 中看到的右下圆角
CSS3 中 border-radius 的隐藏力量
本文将详细介绍使用CSS3 border-radius绘制圆形、半圆和四分之一圆，以及如何使用它们。
如何使用边框半径属性
以下是使用 border-radius 属性的最基本方法。
复制代码
代码如下所示：
。圆形的{
border-radius:5px;/*所有角都使用直径为5px的圆角，该属性是CSS3标准属性*/
-moz-border-radius:5px;/*Mozilla浏览器私有属性*/
-webkit-border-radius:5px;/*Webkit浏览器私有属性*/
border-radius:5px4px3px2px;/*四个直径值分别是左上角、右上角、右下角、左下角*/
关于如何在IE中实现圆角，可以阅读《优秀文章，其中包括在IE中实现圆角的方法》一文。
1. 画一个有边框半径的圆
实心圆
如图所示，是用border-radius属性绘制的一个完美的实心圆。 绘制实心圆的方法是高度和长度相等，边框的长度设置为高度和长度的一半。 代码如下所示。
复制代码
代码如下所示：
＃圆圈{
宽度：200px；
高度：200px；
背景颜色：#a72525；
-webkit边框半径：100px；
空心圆
通过 border-radius 属性绘制空心圆与绘制实心圆类似，只不过边框的长度只能大于高度和长度的一半。 代码如下所示。
复制代码
代码如下所示：
＃圆圈{
宽度：200px；
高度：200px；
background-color:#effefef;/*可以设置为透明*/
边框：3px#a72525solid；
-webkit边框半径：100px；
实心圆
复制代码
代码如下所示：
＃圆圈{
宽度：200px；
高度：200px；
background-color:#effefef;/*可以设置为透明*/
边框：3px#a72525dashed；
-webkit-border-radius:100px100px100px100px;
相关文章
发表评论