目前随着客户对网店风格模板的要求越来越高，设计者在设计方面也是精益求精，不断的追求完美，圆角图片在商城系统的应用也得到广泛流行。今天给大家介绍一种简单的方法：
固定宽度的圆角
这个是最简单的方法：最多只需要使用两个图片（顶部和底部），并且也不需要添加额外的标记。在这里，我使用以下两个图片做背景：
HTML:
<div class="box">
<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.
</div>
CSS:
.box {
width:200px;
background-color:#EE2E24;
background:url("img/rounded-top.jpg") no-repeat left bottom;
color:#fff;}
.box h2 {
background:url("img/rounded-top.jpg") no-repeat left top;
padding: 10px 10px 0 10px;
}
.box p {
padding: 10px;}
优点：
用最少的标记和图片实现了网店风格模板中图片的圆角效果。
缺点：
不够灵活，每次更改商城系统框架的宽度都要更新背景图片。
商城系统 www.wqeshop.com 转载 来源：中国站长网