大家好，欢迎来到IT知识分享网。
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；
-moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。
在这两个属性有值的时候，去掉哪个属性，对用他们做内核的浏览器就有影响，如果没值的话，就没影响，这两个属性和，IE，和360没关系。不删除的话影响微乎其微.
border-radius：用这个属性能实现圆角边框的效果。
现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码：
代码如下:
<div style=”background-color:#ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #000;
padding:10px;”
>
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 和Safari 3 中看到的左上圆角
Mozilla/Firefox 和Safari 3 中看到的右上圆角
Mozilla/Firefox 和Safari 3 中看到的左下圆角
Mozilla/Firefox 和Safari 3 中看到的右下圆角
CSS3中border-radius隐藏的威力
这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆，并如何利用它们。
如何使用border-radius属性
下面是border-radius属性最基本的使用方法。
代码如下:
.round {
border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */
-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
}
关于在IE里怎么实现圆角，可以看《 Excellent Article Which Included Ways to Achieve Rounded Corners in IE》这篇文章。
1.用border-radius画圆
实心圆
如图，是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等，并且把border的宽度设为高度和宽度的一半。代码如下。
代码如下:
#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
}
空心圆
通过border-radius属性画空心圆和画实心圆的方法差不多，只是border的宽度只能小于高度和宽度的一半。代码如下。
代码如下:
#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
}
虚线圆
代码如下:
#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
}
前缀
- -moz(例如 -moz-border-radius)用于Firefox
- -webkit(例如：-webkit-border-radius)用于Safari和Chrome。
例1
<div id="round"></div>
#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
效果：
例2：无边框
<div id="round"></div>
#round {
padding:10px; width:300px; height:50px;
background:#FC9;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}
效果：
书写顺序
/* Gecko browsers */ -moz-border-radius: 5px; /* Webkit browsers */ -webkit-border-radius: 5px; /* W3C syntax - likely to be standard so use for future proofing */ border-radius:10px;
其它
支持上、右、下、左
border-radius:5px 15px 20px 25px;
支持拆分书写
/* Gecko browsers */ -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 20px; /* Webkit browsers */ -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 20px; /* W3C syntax */ border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 20px;
支持性
| 浏览器 | 支持性 |
|---|---|
| Firefox(2、3+) | √ |
| Google Chrome(1.0.154+…) | √ |
| Google Chrome(2.0.156+…) | √ |
| Safari(3.2.1+ windows) | √ |
| Internet Explorer(IE7, IE8) | × |
| Opera 9.6 | × |
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/27961.html
