商城系统：用CSS2创建圆角图片的方法（二）

上一篇文章介绍了网店风格模板固定宽度圆角的方法，这一篇给大家介绍商城系统灵活的圆角应该如何设置。

为了能让圆角更加灵活，我们可以把容器里的每个圆角都做成一个独立的元素，通过CSS强行定位到父容器的四个角上。在这个方法里，我们只需要用到下边这个图片。

HTML:

<div class="box">
<span class="crnr tl"></span>
<span class="crnr tr"></span>
<h2>This is a heading</h2>
Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. Sed
vehicula ligula eu diam tincidunt
fermentum. Curabitur facilisis
enim non libero cursus eu varius
enim suscipit. Ut venenatis
vehicula lorem ut hendrerit. Ut
adipiscing augue sed ante volutpat
eget ornare erat facilisis. In hac
habitasse platea dictumst.
<span class="crnr bl"></span>
<span class="crnr br"></span>
</div>

CSS:

.box {
        position:relative;
        width:200px;
        height:200px;
        }
     .crnr {
        position:absolute;
        background:url("img/crnr-sprite.jpg") no-repeat;
        width:20px;
        height:20px;
       }
      .tl {
            left:0;
            top:0;
            background-position: 0 0 ;
           }
      .tr {
            right:0;
            top:0;
            background-position: -25px 0 ;
           }
       .bl {
             left:0;
             bottom:0;
             background-position: 0 -25px ;
            }
       .br {
             right:0;
             bottom:0;
             background-position: -25px -25px ;
            }

优点：

能自动适应父容器的大小，浏览器兼容性非常强。

缺点：

为了实现圆角，添加了一些没有意义的标记。

商城系统 www.wqeshop.com 转载 来源：中国站长网