CSS圓角

Question

我已經看到了很多代碼，但它看起來不是非常好，或者完全沒有問題。我用圓角的圖片，但我需要的代碼，以便它將圍繞一個<table>的邊界。我發現這個問題的唯一解決方案是在邊界的單元格中放置圖像。還有什麼我可以嘗試？

Answer 1

嘗試：

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

這將在火狐，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

支持所有瀏覽器的唯一方法是在錨標籤上使用圖像背景，通常還會在其容器標籤上使用圖像背景。

例如用HTML這樣的：

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

我想將一個圖像上的錨標籤，和一個在利，使得元件可以是可變的寬度，並且仍然具有圓角。

有CSS3功能和JS解決方案，也可以工作，但不是完全跨瀏覽器兼容。

Answer 3

嘗試CSS 3選擇：

.element { 
border-radius:5px 
} 

對於Safari瀏覽器，谷歌瀏覽器（WebKit的）和Mozilla使用以下兩種選擇（雖然Mozilla的支持CSS 3選擇器（不知道其他人做）：

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

Answer 4

你可以，但只針對supported browsers輪他們通過CSS。

你的其他非圖像選項是基於腳本的樣jQuery Corners或類似的腳本。

這兩種方法都有警告（IE支持，禁用JavaScript的訪問者等）。如果你開始使用它們，我會專注於讓它們在支持CSS的瀏覽器中使用CSS，並確保在IE中沒有這些CSS。

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> 

您的div與id mid的背景將通過CSS垂直平鋪。適用於IE6。

Answer 8

我傾向於使用前面提到的0123b選項person-b。

如果我絕對需要支持IE（即它是設計的基本部分，而不僅僅是一點改進），我已經在使用VML完成工作的dd_Roundies方面取得了一些成功。

Answer 9

檢查出www.easyimg.com，簡單的解決方案，不需要在Photoshop中的CSS黑客或小時。