CSS圓角

Question

我已經看到了很多這方面的代碼，但看起來它們並沒有很好地工作或根本沒有。 我已經使用了圓角的圖片，但我需要代碼，以便它將圍繞<table>的邊框。 我發現這個問題的唯一解決方案是在邊界周圍的單元格中有圖像。 還有什么我可以嘗試的嗎？

Answer 1

嘗試：

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

這適用於Firefox，Safari，Chrome和任何其他兼容CSS3的瀏覽器。 為此創建一個單獨的類可能更容易 - 完全兼容需要3個語句。

另外，請嘗試使用圖像（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舍入它們，但僅限支持的瀏覽器 。

您的其他非圖像選項是基於腳本的，如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來完成工作。