首页 > 代码库 > css实现圆角效果
css实现圆角效果
源码:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style> .b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8 { height:1px; font-size:1px; overflow:hidden; display:block; } .b1, .b8 { margin:0 5px;/*上下0，左右5*/ } .b2, .b7 { margin:0 3px; border-right:2px solid; border-left:2px solid; } .b3, .b6 { margin:0 2px; border-right:1px solid; border-left:1px solid; } .b4, .b5 { margin:0 1px; border-right:1px solid; border-left:1px solid; height:2px; } .sharp { float:left; margin:20px auto 0; margin-right:20%; padding:1px; } .content { height:180px; border-right:1px solid; border-left:1px solid; overflow:hidden; width:160px; } /*蓝色边框*/ .color .b1, .color .b2, .color .b3, .color .b4, .color .b5, .color .b6, .color .b7, .color .b8, .color .content { border-color:blue; /*边框色*/ } .color .b1, .color .b8 { background-color:blue;/*背景色*/ } .color .b2, .color .b3, .color .b4, .color .b5, .color .b6, .color .b7, .color .content { background-color:#eff7ff; } </style></head><body> <div class="sharp color"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"></div> <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b> </div></body></html>
效果:
在非ie浏览器中，可以设置border-radius属性来实现圆角效果。
css实现圆角效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。