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%;

}

你可能感兴趣的:(学习笔记)