使用CSS实现圆角效果

来源：互联网发布：高中数学公式大全软件编辑：程序博客网时间：2024/06/05 02:23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">*{padding:0;margin:0;}.container {width:50%;margin:10px auto;}.holder2 {color:#000;}/*无图片的圆角框*/.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#aaa; margin:0 5px;}.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}.content {border-right:1px solid #aaa; height:200px;border-left:1px solid #aaa;}</style></head><body><div class="container"> <div class="holder">  <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>  <div class="content">   <p>CSS的圆角框</p>  </div>  <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div></div></body></html>