html - CSS:将 Div 添加到 Div(圆 Angular 讨论)

Question

我目前正在使用 CSS 和 Div 标签的组合来实现文本元素上的圆 Angular 。这是我正在使用的 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 中无内容”的规则，但考虑到我的圆 Angular 几乎不符合内容的条件，它在我的书中并没有打破它。

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

Answer 1

简答:有 not currently a well-supported CSS-only方法来做到这一点。

如果您迫不及待地想要获得 CSS3 支持，则可能需要查看 JavaScript 替代品。 Nifty Corners Cube将添加圆 Angular ，并声称甚至抗锯齿。还有很多jQuery corner plugins , 和 this one做很多不同的 Angular 落效果。

您是否有特殊原因要使用图像作为 Angular ？如果您只需要一个圆 Angular ，您可以使用上述 JavaScript 解决方案。我真的建议您查看 Nifty Corners Cube 示例。

编辑:如果您担心额外的标记会损害您的搜索引擎效率，那么 JavaScript 解决方案会更有意义(尽管我认为纯 CSS 解决方案最好)因为额外的标记将被添加到客户端。我曾使用过一些搜索引擎，它们在索引内容之前故意去除脚本标签。