CSS圆角

Question

我已经看过很多这方面的代码，但看起来它们并没有很好地工作或根本没有。我已经使用了圆角的图片，但我需要代码，以便它绕过<table>的边界。我发现这个问题的唯一解决方案是在边界周围的单元格中有图像。还有什么我可以尝试的吗？

Answer 1

尝试：

selector {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

这适用于Firefox，Safari，Chrome和任何其他兼容CSS3的浏览器。为此创建一个单独的类可能更容易 - 完全兼容需要3个语句。

另外，尝试here (cssjuice.com)了解更多使用图像的技巧。

我不完全确定这是否适用于表，但如果您完全可以控制 - 请勿使用<table>进行布局。请。

（注意 - 我认为将表格标签用于表格数据很好，而不是使用DIV的地方。）

更新：仅适用于一个角落：

-moz-border-radius-topleft: 3px;
/* ... */
-webkit-border-top-left-radius: 3px;

继续topright或top-right。

Answer 2

尝试CSS 3选择器：

.element {
border-radius:5px
}

对于Safari，Google Chrome（Webkit）和Mozilla使用以下两个选择器（尽管Mozilla支持CSS 3选择器（不确定是否另一个选择器）：

.element {
-webkit-border-radius:5px;
-moz-border-radius:5px;
}

Answer 3

支持所有浏览器的唯一方法是在锚标签上使用图像背景，通常也会在其容器标签上与图像结合使用。

例如使用这样的HTML：

<ul>
 <li><a href="">something</a></li>
<ul>

我会在锚标签上放置一个图像，在li上放置一个图像，这样该元素可以是可变宽度并且仍然具有圆角。

CSS3功能和JS解决方案也可以使用，但不完全兼容浏览器。

Answer 4

您可以通过CSS对其进行舍入，但仅适用于supported browsers。

您的其他非图片选项是基于脚本的，如jQuery Corners或类似的脚本。

这两种方法都有警告（IE支持，禁用JavaScript的访问者等）。如果您已经开始使用它们，我会专注于让它们在支持它的浏览器中使用CSS，并确保它在IE中没有它们看起来可以接受。

Answer 5

如果您不必使用所有浏览器，请考虑使用border-radius。有关详细信息，请参阅http://www.css3.info/preview/rounded-border/。较新的Mozilla和基于Webkit的浏览器支持此标记或moz-border-radius和-webkit-border-radius。

Answer 6

这是一种不依赖于浏览器的方式（我知道，它适用于流行的浏览器。）它不使用表，因此您必须将表放在最深层嵌套的div中它既冗长又重，但它有效。下面代码中提到的图像是您自己绘制的圆角。角落的半径是44px。

这是对http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

的变体

<div class="tl">
    <div class="tr">
        <div class="bl">
            <div class="br">
                <div class="t">
                    <div class="b">
                        <div class="l">
                            <div class="r">
                                <div>Do or do not, there is no try</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.tl
{
    font-family: Verdana, Arial;
    font-size: 16px;
    position: relative;
    left: 30px; 
}

.tl, .tr, .bl, .br
{
    width: 655px;
    height: 250px;
}

.t
{
    width: 567px;
    height: 250px;    
    margin: 0 0 0 44px;
}

.b
{
    width: 567px;
    height: 250px;    
}

.l
{
    width: 655px;
    height: 162px;    
    margin: 44px 0 0 -44px; 
}

.r
{
    width: 655px;
    height: 162px; 
}

.bl
{
    background: url(/images/front/rcbla.png) 0 100% no-repeat;
}

.br
{
    background: url(/images/front/rcbra.png) 100% 100% no-repeat;
}

.tl
{
    background: url(/images/front/rctla.png) 0 0 no-repeat;
}

.tr
{
    background: url(/images/front/rctra.png) 100% 0 no-repeat;
} 

.t
{
    background: url(/images/front/adot.png) 0 0 repeat-x;
}

.b
{
    background: url(/images/front/adot.png) 0 100% repeat-x;
}

.l
{
    background: url(/images/front/adot.png) 0 0 repeat-y;
}

.r
{
    background: url(/images/front/adot.png) 100% 0 repeat-y;
}

Answer 7

我假设上面的圆角CSS在IE6中不起作用。你可能想要记住的事情。

三个带有背景图像的叠加div是最简单的方法。

<div class="top">&nbsp;</div>
<div class="mid"> <!-- content --> </div>
<div class="bottom">&nbsp;</div>

id为mid的div的背景将通过CSS垂直平铺。适用于IE6。

Answer 8

我倾向于使用之前涵盖的border-radius选项person-b。

如果我绝对需要支持IE（即它是设计的基本部分，而不仅仅是一点点增强），我在dd_Roundies取得了一些成功，它利用VML来完成工作

Answer 9

查看www.easyimg.com这个简单的解决方案，不需要短信攻击或在photoshop中使用小时。