ch4 圆角框

最新推荐文章于 2025-09-22 19:22:25 发布

转载最新推荐文章于 2025-09-22 19:22:25 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lmjZone/p/7738656.html

本文介绍了使用CSS创建圆角框的各种方法，包括固定宽度、灵活扩展和利用CSS3特性的技术。通过不同图像组合和定位，实现框的水平和垂直扩展效果。详细解析了滑动门技术和CSS3的border-radius及border-image属性的应用。

固定宽度的圆角框

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

<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是边框的宽度，如果图像不够大，它们会自动平铺，产生一个可扩展的框。

转载于:https://www.cnblogs.com/lmjZone/p/7738656.html