ch4 圆角框

固定宽度的圆角框

只需要两个图像：一个应用于框的顶部，一个应用于底部

<div class="box">
  <h2>Lorem Ipsum</h2>
  <p class="last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p>
</div>
<style>
.box {
  width: 424px;  //框的宽度必须与顶部和底部图像的宽度一致
  background: url(img/tile2.gif) repeat-y;//在框上设置重复显示的背景图像
}
.box h2 {
  background: url(img/top2.gif) no-repeat left top;//顶部图像应用于标题元素
  padding-top: 20px;
}
.box .last {
  background: url(img/bottom2.gif) no-repeat left bottom;//底部图像应用于文字元素
  padding-bottom: 20px;
}
.box h2, .box p {
  padding-left: 20px;//设置padding使得内容不碰到框的边界
  padding-right: 20px;
}
p {
  margin: 0; /* fixes bug in IE */
}
</style>

随着内容的增加，框垂直扩展（但不会水平扩展）

灵活的圆角框（滑动门技术）

不要使用一个图像组成顶部和底部图像，而是应用两个相互重叠的图像，随之框尺寸的增加，大图像就会有更多部分显露出来，就实现了框扩展的效果------滑动门技术。一个图像在另一个图像上滑动，将它的一部分隐藏了起来，所以需要更多的图像，则必须在标记中添加两个额外的无语义元素。

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>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p>
    </div>
  </div>
</div>
<style>
.box {
  width: 20em;//框的宽度以em为单位，框会随着文本尺寸进行伸缩，也可以设置为%，框就会随着浏览器窗口的尺寸进行伸缩
  background: url(img/bottom-left.gif) no-repeat left bottom;   //bottom-left.gif应用于主框div
}
.box-outer {
    background: url(img/bottom-right.gif) no-repeat right bottom;   //bottom-right.gif应用于外边的div
    padding-bottom: 1px;
}
.box-inner {
    background: url(img/top-left.gif) no-repeat left top;   //top-left.gif应用于内部的div
}

.box h2 {
  background: url(img/top-right.gif) no-repeat right top;   //top-right.gif应用于标题
    padding-top: 1em;
}
.box h2, .box p {
    padding-left: 1em;
    padding-right: 1em;
}
</style>

字号增加，文本尺寸增加，圆角框会进行水平和垂直扩展

CSS3新特性

• 多个背景图像：不是定义一个背景图像，而是使用任意数量的图像，用background-image定义要使用的所有图像，background-repeat指定是否应该重复显示，用background-position设置它们的位置。

  <div class="box">
      <h2>My Rounded Corner Box</h2>
      <p>This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images. </p>
  </div>
  <style>
  .box {
      background-image: url(img/mtop-left.gif), url(img/mtop-right.gif), url(img/mbottom-left.gif), url(img/mbottom-right.gif);
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
      background-position: top left, top right, bottom left, bottom right;
  }
  </style>

• border-radius：设置边框角的半径。
• border-image：允许指定一个图像作为元素的边框，根据一些百分比规则把图像划分为9个单独的部分，浏览器会自动的使用适当的部分作为边框的对应部分---九分法缩放，有助于避免在调整圆角框大小时出现的失真。

  <div class="box">
      <h2>Yet Another Rounded Corner Box</h2>
      <p>This is another rounded corner box......</p>
  </div>
  .box {
    -webkit-border-image: url(img/corners.gif) 25% 25% 25% 25% / 25px round round;
  }

在距离框的顶边和底边25%的地方画两条线，在距离左边和右边25%的地方画两条线，框就形成了9个部分。
border-image属性会自动的把图像的每个部分用于对应的边框，因此，图像的左上部分用作左上边框，右边中间部分用作右边的边框。25px是边框的宽度，如果图像不够大，它们会自动平铺，产生一个可扩展的框。