css3圆角实现方法（border-radius）
作者：佳明妈 来源：jquery插件 2015-07-05 人气：css3圆角实现方法是（border-radius），css3半圆的画法、css3四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。
css3圆角实现方法是（border-radius）下面对使用border-radius来画出css3正圆、css3半圆、css3四分之一圆等画法探讨测试。
css3圆角浏览器支持情况：IE9及其以上，火狐，谷歌等浏览器。
如果四个角的弧度相同可以这样写：border-radius:6px;
css3圆角border-radius的单位也支持百分比%
css3圆角浏览器支持情况：IE9及其以上，火狐，谷歌等浏览器。
css3圆角的书写顺序：
border-radius:上 右 下 左 例如：border-radius:10px 4px 20px 10px;如果四个角的弧度相同可以这样写：border-radius:6px;
css3圆角border-radius的单位也支持百分比%
使用border-radius实现正圆的方法：
border-radius:100%;css3半圆的画法：
左边半圆就是高度设为宽度的一半，radius只写下和左即可 如： radius: 0 0 200px 200px;
#quartercircle{
width: 200px;
height: 100px;
background-color: #a72525;
border-radius: 0 0 200px 200px;
}
具体情况大家可以自己动手试试，各种情况都试试看能画出那些类型的半圆来。
具体情况大家可以自己动手试试，各种情况都试试看能画出那些类型的半圆来。
css3四分之一圆的实现方法
是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。
#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
border-radius: 200px 0 0 0;
}
↓ 查看全文
css3圆角实现方法（border-radius）由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
css3圆角实现方法（border-radius）-最新评论