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

すべてのブラウザをサポートする唯一の方法は、アンカータグにイメージの背景を使用することです（通常はコンテナタグ上のイメージと組み合わせる）。このようなHTMLと例えば

：

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

要素が可変幅にすることができ、それでもコーナーを丸めているように私には、アンカータグ、およびLiの1対1の画像を配置します。

CSS3機能とJSソリューションもありますが、完全にクロスブラウザとは互換性がありません。

Answer 3

てみCSS 3のセレクタ：サファリのために

.element { 
border-radius:5px 
} 

、MozillaはCSS 3のセレクタ（他の1が行うかどうかわからないをサポートしていますが、Google Chromeの（のWebkit）とMozillaは（以下の2つのセレクタを使用します）：

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

Answer 4

あなたはCSSを通じてだけsupported browsersのためにそれらを締めくくることができます。

あなたの他の非画像オプションがのようなスクリプトベースですまたは同様のスクリプト。

これらの方法には注意が必要です（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です。私は上記の丸みを帯びたコーナーCSSは、IE6で動作しないことを仮定してい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

：

これは上のバリエーションです。何かを念頭に置いておきたいことがあります。

背景画像を持つ3つのスタックされたdivが最も簡単です。

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

divを持つdivの背景は、CSSを使用して垂直方向にタイル表示されます。 IE6で動作します。

Answer 8

私は、以前にカバーされたborder-radiusオプション人-bと一緒に行く傾向があります。

IEを絶対にサポートする必要がある場合（つまり、デザインの基本的な部分であり、少し強化されているわけではありません）、私はdd_Roundiesでいくつかの成功を収めています。

Answer 9

www.easyimg.comをチェックしてください。簡単な解決方法は、PhotoshopでCSSのハックや時間を必要としません。