CSS:将Div添加到Div(圆角讨论)

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

简短回答:目前还没有一种支持CSS的方法来做到这一点.

如果您不能等待CSS3支持,您可能需要查看JavaScript替代方案.Nifty Corners Cube将添加圆角,并声称甚至可以消除别名.还有很多jQuery角点插件,这个插件有许多不同的角落效果.

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

编辑:如果您担心额外的标记会损害您的搜索引擎效率,那么JavaScript解决方案会更有意义(尽管我认为仅使用CSS的解决方案)因为额外的标记会添加到客户端.我曾与一些搜索引擎合作,他们故意在索引内容之前删除脚本标记.