CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
发布时间：2012-03-28 14:17:14 作者：佚名 
我要评论
我要评论border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。
-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;
}
相关文章
CSS3 border-radius(圆角)效果在线调试工具
这是一款可在线调试并预览CSS3 border-radius(圆角)效果的工具。右侧具有实时调试并显示预览效果的功能，同时能够实时生成对应的css3效果代码，方便需要的朋友使用。2016-05-31- 这篇文章主要介绍了CSS3中border-radius属性设定圆角的使用技巧,border-radius的作用不止是最常用的圆角矩形,我们还可以利用它设置弧度来制作其他弧线边框图形,需要的朋友2016-05-10
- 这篇文章主要介绍了CSS3使用border-radius属性制作圆角，并附上示例代码，推荐给有相同需求的小伙伴。2014-12-22
IE系列不支持CSS的圆角border-radius等属性的解决方案
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性，如何解决这个问题呢？百度了一下，发现有个开源的插件可以解决此问题2014-09-15实现CSS3中的border-radius(边框圆角)示例代码
本文为大家详细介绍下如何实现CSS3中的border-radius(圆角)，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-19- 前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法;在CSS2中，大家都碰到过圆角的制作,如今CSS3中的border-ra2012-12-24
CSS3 border-radius圆角的实现方法及用法详解
这篇文章主要介绍了CSS3 border-radius圆角的实现方法及用法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-14
最新评论