本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是: "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐,或者IE9以上。IE6、7、8不支持。
在线预览效果:/texiao/css/4.htm
画圆型的例子:/h/bjae/css3circle.htm
实际应用:/texiao/jquerytree/3/
测试:/texiao/css/4b.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>CSS3实现DIV圆角 - CSS3教程 - 计划 - 博客园</title><meta name="keywords" content="/jihua"/><style type="text/css"> #yuanjiao{font-family: Arial;border: 2px solid #379082;border-radius: 20px;padding: 30px 30px;width: 330px;}</style> </head><body><div id="yuanjiao">本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是: "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐,或者IE9。IE6、7、8不支持。<br /><br />博客园计划CSS3教程<br /></div></body></html>
效果图(Chrome):
实际效果(请使用支持CSS3的浏览器):
本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是: "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐,或者IE9。IE6、7、8不支持。
博客园计划CSS3教程