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 Plugin。它非常快速适用于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中是否可以正常工作，或者您在其他浏览器中获得了圆角？

补充：使用另一个答案（或其他一些预先打包的解决方案）中提到的jQuery插件可能是可以接受的。只要它不需要任何额外的<div>，<img>或其他标记。

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

知道了吗？坚持下去，我会在某个地方举个例子： - ）

修改：刚刚提出an example！

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

你可以做到15 * 15px的所有角落并设置容器的背景颜色。但是，当像这样拉伸这些图像时，您将有机会添加阴影，渐变或其他效果。这就是我以前做的事情，所以我用拉伸的图像这样做了。

这个方法经过了很好的测试，并且据我所知/记得工作至少可以回到IE 5.5。

Answer 4

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

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

CSS3Pie是IE的“黑客”，允许您在CSS中设置圆角，而不用担心其他任何地方。一下子，你可以丢弃你的标记和那些jquery插件中的所有额外的div，并在样式表中按照它应该的方式指定它。

所有其他浏览器都支持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浏览器不兼容，但我仍然喜欢它：）

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

6 个答案:

标记

CSS