Question

我目前正在使用CSS和Div标签的组合来实现文本元素的圆角。这是我正在使用的CSS：

div#installerSearch {
    float: left;
    position: relative;
    color: #000055;
    width: 154px;
    border: 1px solid #2A5390;
    padding: 8px;
    background-image: url('images/background.png');
}

div.roundAllGreen {
    position: absolute;
    width: 8px;
    height: 8px;
    background-image: url('images/roundgreenthingy.png');
}

div.roundTopLeft {
    left: -1px;
    top: -1px;
    background-position: 0px 0px;    
}

div.roundTopRight {
    right: -1px;
    top: -1px;
    background-position: -7px 0px;    
}

div.roundBottomLeft {
    left: -1px;
    bottom: -1px;
    background-position: 0px -7px;    
}

div.roundBottomRight {
    right: -1px;
    bottom: -1px;
    background-position: -7px -7px;    
}

这是生成的HTML：

<div id="installerSearch">
    <div class="roundAll roundTopLeft"></div>
    <div class="roundAll roundTopRight"></div>
    <div class="roundAll roundBottomLeft"></div>
    <div class="roundAll roundBottomRight"></div>
    <p> ... </p>
</div>

其他人可以发现这个问题吗？我已经采用了（因为没有更好的方法）以标记的形式包含演示，这使得重新主题变得有点困难，正如我正在尝试的那样。

我真正喜欢的是能够让CSS在容器div中添加div标签。我意识到这在代码级别上打破了“CSS中没有内容”规则，但考虑到我的圆角几乎没有资格作为内容，它不会在我的书中破坏它。

所以我想我要问的是，是否有一种很好的方法可以实现相同的效果（使用图像的圆角）而无需使用CSS在我的内容中引入额外的标签？这里的想法是最终得到一张CSS表，我可以完全换掉而无需修改我的模板HTML页面，但如果不可能，我会接受这个作为答案。看来谷歌这次完全失败了。 ^ _ ^

Answer 1

简短回答：有not currently a well-supported CSS-only方法可以做到这一点。

如果您不能等待CSS3支持，您可能希望查看JavaScript替代方案。 Nifty Corners Cube会添加圆角，甚至声称反别名。还有很多jQuery corner plugins，this one会产生许多不同的角落效果。

是否有特殊原因想要将图像用于角落？如果您只需要一个圆角，您可以使用上述JavaScript解决方案。我真的建议你看看Nifty Corners Cube的例子。

编辑：如果您担心额外的标记会损害您的搜索引擎效率，那么JavaScript解决方案会更有意义（尽管我认为只有CSS的解决方案才是最好的），因为额外的标记将添加到客户端。我曾经使用过一些搜索引擎，他们故意在索引内容之前删除脚本标记。

Answer 2

其他人可以发现这个问题吗？

roundAll和roundAllGreen之间className的区别？

我已经采用（因为没有更好的方法）以标记的形式包含演示文稿，这使得重新设置主题变得有点困难，正如我正在尝试的那样。

在（a）IE支持border-radius或（b）单个元素上的多个背景图像成为可能之前，对标记的某种干扰是不可避免的。

干扰程度稍低的另一种可能性是背景嵌套：

<div class="box"><div><div><div>
    Hello
</div></div></div></div>

.box { background: url(topleft.png) top left no-repeat; }
.box div { background: url(topright.png) top right no-repeat; }
.box div div { background: url(bottomleft.png) bottom left no-repeat; }
.box div div div { background: url(bottomright.png) bottom right no-repeat; }

在当前页面中，框的宽度是固定的，因此您只能使用两个嵌套的div，一个用于顶边，一个用于底部。

Answer 3

您可以编写将为您添加这些div的JavaScript。但它在CSS中是一个巨大的问题，它确实取决于其他人可能会说的内容。

Answer 4

另一个非常好用的jquery插件：Anti-aliased Rounded corners with JQuery

Answer 5

bobinces解决方案的一个模块：

<div class="box"><div><div><div>
    Hello
</div></div></div></div>

.box { background: url(topleft.png) top left no-repeat; }
.box>div { background: url(topright.png) top right no-repeat; }
.box>div>div { background: url(bottomleft.png) bottom left no-repeat; }
.box>div>div>div { background: url(bottomright.png) bottom right no-repeat; }

Answer 6

我认为你反对使用图像？如果您不反对图片，请尝试http://www.easyimg.com。非常酷的解决方案，没有任何Photoshop工作要做。直接在img src标签中设计图像。

CSS：将Div添加到Div（圆角讨论）

6 个答案: