日期:2013-04-26  浏览次数:21168 次

先看CSS款式:

.border{ background:#ffecf9; border:1px solid #ffd3ec; width:500px; position:relative; }

.lt{ background:url(../images/border_lt.gif) no-repeat; left:0; top:0; position:absolute; width:7px; height:7px;}
.rt{ background:url(../images/border_rt.gif) no-repeat; right:0;  top:0; position:absolute; width:7px; height:7px;}
.lb{ background:url(../images/border_lb.gif) no-repeat; left:0; bottom:0; position:absolute; width:7px; height:7px;}
.rb{ background:url(../images/border_rb.gif) no-repeat; right:0; bottom:0; position:absolute; width:7px; height:7px;}


.content{}

代码:

<div class="border">
            <div class="lt-1"></div>
            <div class="rt-1"></div>
            <div class="lb-1"></div>
            <div class="rb-1"></div>

            <div class="content">This is content.</div>

</div>

款式中的border_lt.gif等4个图片就是div的4个圆角图片,需求本人完整的切出来,大小视情况而定
位置通过left、top、right、bottom来绝对控制

说明:

1、绝对定位的border层,宽度和高度至少定义一个,如果不定义的话,火狐是可以正常显示,但是IE会有很多问题

2、.lb{ background:url(../images/border_lb.gif) no-repeat; left:0; bottom:0; position:absolute; width:7px; height:7px;}
这里位置的定义,IE下可能存在些许差别,可针对IE特别设置,示例如下:

.lb{ background:url(../images/border_lb.gif) no-repeat; left:-1px!important; left:-5px; bottom:-1px!important; bottom:-5px; }

具体视情况而定

本文链接http://www.cxybl.com/html/wyzz/CSS/20120610/29269.html