css3提供了border-radius的属性，可以为网页元素设置圆形的角，从而界面优美了不少，也避免了图形后成圆角的加载问题，下面罗列了利用border-radius制作的圆形、半圆、1/4圆及椭圆，充分展示它的强大功能。
示例效果：
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 100px; height: 100px; text-align: center; line-height: 100px; background: orange; margin: 10px; float: left; } #div1 { border-radius: 50%; } #div2 { height: 50px; line-height: 50px; border-radius: 50px 50px 0 0; } #div3 { width: 50px; border-radius: 0 50px 50px 0; } #div4 { height: 50px; line-height: 50px; border-radius: 0 0 50px 50px; } #div5 { width: 50px; border-radius: 50px 0 0 50px; } #div6 { border-radius: 100px 0 0 0; } #div7 { border-radius: 0 100px 0 0; } #div8 { border-radius: 0 0 100px 0; } #div9 { border-radius: 0 0 0 100px; } #div10{ height: 50px; line-height: 50px; border-radius: 100px/50px; } #div11{ width: 50px; border-radius: 50px/100px; } </style> </head> <body> <div id="div1"> 圆形 </div> <div id="div2"> 上半圆 </div> <div id="div3"> 右半圆 </div> <div id="div4"> 下半圆 </div> <div id="div5"> 左半圆 </div> <div id="div6"> 扇形1 </div> <div id="div7"> 扇形2 </div> <div id="div8"> 扇形3 </div> <div id="div9"> 扇形4 </div> <div id="div10"> 椭圆1 </div> <div id="div11"> 椭圆2 </div> </body> </html>