当前位置:编程学习 > html/css >>

DIV+CSS布局,但是想要显示出来的层的四个角为圆角,请问怎样实现呢?

答案:上下左右四个角分别用四张图片,可自适应高度和宽度。 以上讲的三种方法处理图片的时候在图片的外围小三角区域都填充网页的背景色,这样才能显示圆角。 纯CSS
其他:可以用样式表去写

<style type="text/css">
div.RoundedCorner{background:#9BD1FA; width:400px;}
b.rtop, b.rbottom{display:block;background: fff}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div> 



不过最好最简单的办法还是将div的背景用圆角的背景图片就好了 如果不在乎是否支持css3,可以试试border-radium这是css属性。 

上一个:asp如何连接外部css文件,在asp中添加了外部样式表,在谷歌浏览器里是好的,可是到了ie下就没有加载到。
下一个:CSS高手们: background: url("bg1.jpg") no-repeat scroll center 30px;

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,