CSS学习笔记（六）圆角框

1.固定宽度的圆角框

最容易的一种方式是：使用两个圆角图片，一个放在顶部，一个放在底部

<div class="box">

　　<h2>Headline</h2>

　　<p>Content</p>

</div>

.box{

　　width:418px;

　　background:url(images/bottom.gif) no-repeat left bottom;

}

.box h2 {

　　background:url(images/top.gif) no-repeat left top;

}

要是不希望内容碰到框的边界，所以还需在div中元素上添加一些填充：

.box h2{

　　padding: 10px 20px 0 20px;

}

.box p{

　　padding:0 20px 10px 20px;

}

当我们需要在纵向和横向上都扩展这个圆角框时，我们就需要一种更能解决这种情况的方法：滑动门技术

这个方法需要四个图像：两个顶部图像组成顶部曲线，两个底部图像组成底部曲线和框的主体

并且底部图像的高度必须与框的最大高度相同，并分别将这些图片命名为top-left.gif,top-right.gif,bottom-left.gif,bottom-right.gif

将bottom-left.gif应用于主框div，将bottom-right.gif应用于外边的div。将top-left.gif应用于内部的div，将top-right.gif应用于标题。最后添加一些填充以便在内容周围形成一点空白。

<div class="box">

　　<div class="box-outer">

　　　　<div class="box-inner">

　　　　　　<h2>Headling</h2>

　　　　　　<p>Content</p>

　　　　</div>

　　</div>

</div>

.box{

　　width:20em;

　　background:#effce7 url(images/bottom-left.gif) no-repeat left bottom;

}

.box-outer{

　　background:url(images/bottom-right.gif) no-repeat right bottom;

　　padding-bottom:5%;

}

.box-inner{

　　background: url(images/top-left.gif) no-repeat left top;

}

.box h2{

　　background:#effce7 url(images/top-right.gif) no-repeat right top;

　　padding-top:5%;

}

.box h2, .box p{

　　padding-left:5%;

　　padding-right:5%;

}