DIV不用图片做可变可到处用的圆角

xiaoxiao2021-03-01  29

http://www.iteye.com/topic/610962 样例,上面是两个圆角Box。 Html代码 <!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> <title> 圆角样式 </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> .b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;} .b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;} .b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;} .bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;} .bt {background: #EDF7FF;margin:0 2px;padding:5px;} .bb {background: #FFFFFF;margin:0 2px;padding:5px;} /**另一种颜色*/ .bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/ .bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/ .bb3{background: #E7F9E3;}/*标题背景颜色*/ </style> </head> <body> <b class="b1"></b><b class="b2"></b><b class="b3"></b> <div class="bc"> <div class="bt ">标题</div> <div class="bb"> 圆角三边 这里是内容 </div> </div> <b class="b3"></b><b class="b2"></b><b class="b1"></b> <hr/> <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b> <div class="bc bb2"> <div class="bt bb3">另一种颜色</div> <div class="bb"> 另一种颜色 这里是内容 </div> </div> <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b> </body> </html> 这里是三个厚度的圆角,如果需要再圆角大一点,b这个标记多放一个,也就是多一个象素的圆角出来了。 如果要拷到新的地方使用,只要像 Html代码 /**另一种颜色*/ .bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/ .bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/ .bb3{background: #E7F9E3;}/*标题背景颜色*/ 这样添加一个样式就可以了。 相关资源:使用Div CSS纯图片实现圆角矩形的方法小结
转载请注明原文地址: https://www.6miu.com/read-3450116.html

最新回复(0)