跨浏览器可扩展的圆角，具有语义代码和最少的图像使用。可能吗？

Question

我知道如果没有Javascript或图片，IE无法进行圆角。 如果js被禁用，JS解决方案将无效，因此我想选择图像选项

我需要任何图像+ css解决方案，以使最小，易于制作和纯语义和< strong> W3C有效代码，可扩展和最少使用图片和photoshop工作。

我知道FF和safari可以用纯css做但我需要跨浏览器解决方案没有javascript。我希望尽量少用XHTML代码和图像。

Answer 1

请参阅25 Rounded Corners Techniques with CSS。

  

ThrashBox - 创建带有视觉闪光的圆角框和绝对最少量的语义正确标记。

_{（来源：cssjuice.com）}

XHTML：

<div class="sidebox">
    <div class="boxhead"><h2>Test Headline</h2></div>
    <div class="boxbody">
        <p>This is a short sample paragraph.</p>
        <p>And another one.</p>
    </div>
</div>

  

Resizable box with freely stylable corners and surface - 可调整大小的圆角框。

_{（来源：cssjuice.com）}

两位作者都提到Sliding Doors of CSS关于拉伸性的问题。

Answer 2

我会做这样的事情

<div id="box">
    <p>content</p>
    <span class="top-left"></span>
    <span class="top-right"></span>
    <span class="bottom-left"></span>
    <span class="bottom-right"></span>
</div>

使用绝对定位将span定位在角落中。使用span s会有一些污染，但它可以跨浏览器工作。您也可以摆脱一个，只是将#box背景作为角落图像之一。

也请使用精灵。绘制一个圆，并使用负背景位置将象限定位到每个跨度中。

如果您希望尽可能保持语义（并且略有不同），可以将所有span包装在IE条件注释中，将border-radius应用于框，然后应用样式我们的朋友IE的跨度。然而，在我看来这有点过分。

Answer 3

这个网站有很多“snazzy borders”和“krazy korners”，Stu摇滚！

另外，您在关于框或按钮的问题中没有具体说明，因此您可以查看这些链接以获取一些CSS方法：

一个SO answer和一些链接：Sexy buttons和unbreakable buttons

Answer 4

几年前我写过这篇文章：语义HTML，一个图像，最小的CSS，适用于大多数浏览器。结合了几种技术。

http://www.the-haystack.com/2006/03/16/rounded-corners/

不过，我会在支持它的浏览器中使用(-[prefix]-)border-radius，并保留其他浏览器。