CSS 实现固定宽度圆角框效果

最新推荐文章于 2025-08-15 20:44:49 发布

原创最新推荐文章于 2025-08-15 20:44:49 发布 · 753 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #blog #url

本文介绍了一种使用CSS背景图片实现圆角盒子效果的方法。通过设置不同的背景图片及重复方式，可以为网页元素创建美观的圆角边框。文章详细展示了如何利用URL指向的图像作为背景，并通过特定的padding属性调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
 /* rounded corner box
================================== */
.box {
  width: 424px;
  background: url(images/tile2.gif) repeat-y;
}
.box h2 {
  background: url(images/top2.gif) no-repeat left top;
  padding-top: 20px;
}
.box .last {
  background: url(images/bottom2.gif) no-repeat left bottom;
  padding-bottom: 20px;
}
.box h2 {
  padding-left: 20px;
  padding-right: 20px;
}
.box p {
  padding-left: 20px;
  padding-right: 20px;
}