CSS 圆角快速完成：这是一项糟糕的技术吗？

Question

这是我一直在尝试的一种快速而肮脏的圆角技术。

<!-- assuming the div isn't statically positioned -->
<div>
    <img src="box_TL.png" style="position:absolute;top:0;left:0;"/>
    <img src="box_TR.png" style="position:absolute;top:0;right:0;"/>

    <!-- other content -->

    <img src="box_BL.png" style="position:absolute;bottom:0;left:0;"/>
    <img src="box_BR.png" style="position:absolute;bottom:0;right:0;"/>
</div>

是的，它很丑，但是速度很快，角落是流畅的，它避免了嵌套的 div 并且不需要 JavaScript。角图像和内容顺序没有区别，但我认为以这种方式排序角和内容可能更直观。

问题：这个技术有多可怕？还可以吗，还是应该彻底放弃？

Answer 1

我会使用 jQuery Corner 插件。它非常快，并且可以在所有现代浏览器中运行，也在 IE6 中。

Answer 2

太可怕了。您的标记应该是内容，您的布局应该是风格。不杂乱。您应该使用：

<div class="whatitis">
   bla blah ... content here
</div>

和样式：

.whatitis {
    background: whatever;
    border: whatever;
    border-radius: 1em;
    -moz-border-radius: 1em
    -webkit-border-radius: 1em;
}

是的，当然，某些浏览器不会出现圆角。但是，如果您编写了一个解决方案，即使在不支持该功能的浏览器中也能提供适当的圆角，那么您将得到一个复杂的解决方案，而且您的网站很可能在其他一些浏览器中根本无法工作。因此，您应该问自己：网站在某些浏览器 X 中正常运行，还是在其他浏览器 Y 中获得圆角，哪一个更重要？

添加：使用另一个答案中提到的 jQuery 插件（或其他一些预打包的解决方案）可能是可以接受的。只要它不需要任何额外的

、或其他标签。

Answer 3

这是一个糟糕的解决方案，抱歉:-)

确实，您不需要任何 JavaScript 或嵌套 div 元素。无论如何，JavaScript 是很容易避免的。但是四个不相关的 img 元素是否比几个嵌套的 div 元素更好呢？ img 元素应该包含图像内容，使用它进行布局基本上与使用表格进行布局相同。是的，它有效，但它是错误的，并且它破坏了所有语义价值。

如果我是你，我会这样做（请原谅那些愚蠢的类名，它们只是为了说明）：

标记

<div class="boxWithRoundedCorners">
    <div class="roundedCornersTop">
        <div class="roundedCornersTopRight"></div>
    </div>

    <p>Your content goes here, totally unaffected by the corners at all. Apply all necessary margin and other styling to make it look good.</p>

    <div class="roundedCornersBottom">
        <div class="roundedCornersBottomRight"></div>
    </div>
</div>

CSS

.boxWithRoundedCorners { background: red; }
.roundedCornersTop { 
    background: url(topLeftCornerPlusTheTopOfTheBox.gif); /* Should be pretty long. Assuming your corners are 20*20px, this could for instance be 1000*20px, depending on how large the box would ever be in the real world */
    height: 20px;
}

.roundedCornersTopRight {
    background: url(topRightImage.gif);
    width: 20px;
    height: 20px;
    float: right;
}

.roundedCornersBottom { background: url(topBottomCornerPlusTheBottomOfTheBox.gif); /* same "rule" as above */
    height: 20px;
}

.roundedCornersBottomRight {
    background: url(bottomRightImage.gif);
    width: 20px;
    height: 20px;
    float: right;
}

明白了吗？等一下，我会在某个地方举一个例子:-)

编辑：刚刚提出了一个一个例子！

无论如何，这种方法将确保盒子的高度和宽度具有完全的灵活性，并且盒子内的布局始终按其应有的方式工作，不受角落的影响。
是的，它为您提供了一些嵌套的 div，除了布局之外没有其他用途 - 但话又说回来，这就是 DIV 的用途。 IMG 应始终是与内容相关的图像。

您可以将所有角设为 15*15px 并设置容器的背景颜色。然而，当像这样拉伸这些图像时，您有机会添加阴影、渐变或其他效果。这是我习惯做的，所以我对拉伸图像这样做了。

这种方法已经过充分测试，据我所知/记得至少在 IE 5.5 上都可以正常工作。

Answer 4

这是一个非常古老的话题，但由于它重新出现在首页上，我将添加一条评论。

在过去的几个月里，出现了一种新的圆角解决方案，它解决了所有相关版本的 IE（6、7、8）的问题。

CSS3Pie 是 IE 的“hack”，它允许您在 CSS 中设置圆角，而不必在其他地方担心它。您可以一次性扔掉标记中所有多余的 div 和 jquery 插件，只需在样式表中按照应有的方式指定它即可。

所有其他浏览器都支持 CSS 中的圆角，并且已经这样做了足够长的时间，因此您无需担心旧版本。

CSS3Pie 还可以帮助处理 IE 中的 CSS 渐变和框阴影，因此这对于跨浏览器开发人员来说是一个巨大的胜利。

Answer 5

使用 PNG 时，您会遇到 IE6 的问题，因此您需要向 div 添加正确的 CSS 过滤器背景而不是图像，或者使用 javascript 帮助将 png 图像转换为添加了 png 背景的透明 gif。

http://www.twinhelix.com/css/iepngfix/

Answer 6

如果框是固定宽度的，那么您可以使用一个有趣的技巧，该技巧适用于 IE8 和其他浏览器（但不适用于 IE7）：

div.rounded {
  width: 600px;
  padding: 0 10px;
}

div.rounded:before,
div.rounded:after {
  display: block;
  content: "";
  width: 600px;
  height: 10px;
}

div.rounded:before { background: url(images/rounded_top.png); }
div.rounded:after { background: url(images/rounded_bottom.png); }

不幸的是，这不适用于任何具有流动宽度的内容，并且与旧版 IE 不兼容浏览器，但我仍然喜欢它:)