我如何使用CSS创建圆角?


当前回答

当然,如果它是一个固定的宽度,它是超级容易使用CSS,而不是在所有冒犯或费力。当你需要向两个方向扩展时,情况就会变得不稳定。有些解决方案将大量的divs堆叠在一起以实现这一目标。

我的解决方案是告诉设计师,如果他们想使用圆角(暂时),它需要一个固定的宽度。设计师喜欢圆角(我也是),所以我觉得这是一个合理的妥协。

其他回答

当然,如果它是一个固定的宽度,它是超级容易使用CSS,而不是在所有冒犯或费力。当你需要向两个方向扩展时,情况就会变得不稳定。有些解决方案将大量的divs堆叠在一起以实现这一目标。

我的解决方案是告诉设计师,如果他们想使用圆角(暂时),它需要一个固定的宽度。设计师喜欢圆角(我也是),所以我觉得这是一个合理的妥协。

不久前我写了一篇关于这方面的博客文章,想要了解更多信息,请看这里

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

它运行得很好。不需要Javascript,只需CSS和HTML。用最小的HTML干扰其他东西。它与Mono发布的非常相似,但不包含任何ie6的特定hack,经过检查,似乎根本不起作用。另外,另一个技巧是使每个角落图像的内部部分透明,这样它就不会挡住角落附近的文本。外部部分不能是透明的,这样可以掩盖非圆角div的边框。

此外,一旦CSS3广泛支持border-radius,这将是官方制作圆角的最佳方法。

Opera目前还不支持border-radius(显然在版本10之后才会支持)。同时,您可以使用CSS设置SVG背景来创建类似的效果。

我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

要让圆角发挥作用是多么复杂,甚至雅虎都不鼓励他们(见第一个项目符号)!当然,他们在那篇文章中只谈论了1像素的圆角,但有趣的是,即使是一家拥有他们专业知识的公司也得出结论,让他们大部分时间工作太痛苦了。

如果你的设计可以在没有它们的情况下存活,这就是最简单的解决方案。