传统的圆角矩形实现，必须使用多张图片作为背景图案。CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了。
css实现圆角矩形、半圆、圆形效果的优点：
* 减少维护的工作量，不再需要使用图片。
* 提高网页性能，网页的载入速度将变快。
* 增加视觉可靠性。某些情况下，背景图片会下载失败，CSS3就不会发生这种情况。
border-radius属性
CSS3圆角只需设置一个属性：border-radius（含义是”边框半径”）。
为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
比如，下面是一个div方框：
现在设置它的圆角半径为15px：
border-radius: 15px;
这条语句同时将每个圆角的”水平半径”（horizontal radius）和”垂直半径”（vertical radius）都设置为15px。
border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。
如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。
如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。
如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
border-radius: 15px 5px;
border-radius: 15px 5px 25px;
border-radius: 15px 5px 25px 0px;
（左下角的半径为0，就变成直角了。）
单个圆角的设置
除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。
如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
border-top-left-radius: 15px;
border-top-left-radius: 15px 5px;
注意：
CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。
-webkit-border-radius -moz-border-radius -ms-border-radius -o-border-radius
border-radius的优势不仅仅在制作圆角的边框，还是利用border-radius属性来画圆和半圆。
1、制作半圆的方法：
元素的高度是宽度的一半，左上角和右上角的半径元素的高度一致（大于高度也是可以的，至少为height值）。
<div class="semi-circle"></div>
.semi-circle{
width:100px;
height:50px;//高度是宽度的一半
background-color:#000;
border-radius:50px 50px 0 0;//左上和右上至少为height值
}
效果:
知道了如何画上半圆，就会举一反三画其他方向的圆了，看完教程要马上试一试哦，学习网页制作关键在动手实践！
2、画实心圆的方法：
原理：设置DIV宽度和高度一致(正方形)，然后四个角设置为高度或者宽度的1/2.
<div class="circle"></div>
.circle{
width:100px;
height:100px;
background-color:#cb18f8;
border-radius:50px;
}
效果：
本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/1060.html
微信扫一扫 
支付宝扫一扫