边框的四个角是弧形改怎样实现

yurui05 2008-11-14 09:41:45

小弟正在做切图怎样实现这样一个效果啊：一个内容块的边框的四个角是圆弧而不是90°直角的
而border属性中没有弧形的啊请问该怎样解决在线等

...全文

1086 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiazhexuedehai 2008-11-14

打赏
举报

CSS 源代码 (CSS Code)：
<style type="text/css">
.chala-corner{width:660px;font-size:12px;background-color:#ffffff;padding:12px;margin:12px 0px}
.chala-content{height:50px;line-height:50px;text-align:center;padding:0px 5px;background-color:#ffffff;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B}
.chala{display:block;background-color:#ffffff}
.chala *{display:block;height:1px;overflow:hidden;background-color:#ffffff}
.chala1{margin:0px 2px;border-left:1px solid #b3b3b3;border-right:1px solid #b3b3b3;padding:0px 1px;background-color:#8B8B8B}
.chala2{margin:0px 1px;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B}
.chala3{margin:0px 0px;border-left:1px solid #b3b3b3;border-right:1px solid #b3b3b3}
.chala4{margin:0px 0px;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B}
</style>

DIV 内容HTML源代码 (DIV/HTML Code)：
<div class="chala-corner">
<b class="chala">
<b class="chala1"> </b>
<b class="chala2"> </b>
<b class="chala3"> </b>
<b class="chala4"> </b> </b>
<div class="chala-content">这里填写内容 </div>
<b class="chala">
<b class="chala4"> </b>
<b class="chala3"> </b>
<b class="chala2"> </b>
<b class="chala1"> </b> </b>
</div>