cross-browser - CSS を使用して角を丸くする

Question

CSS を使用して角を丸くするにはどうすればよいですか?

score 105 · Accepted Answer

CSS3 が導入されて以来、CSS を使用して角を丸くする最良の方法は、border-radiusプロパティを使用することです。プロパティの仕様を読んだり、 MDNで役立つ実装情報を入手したりできます。

実装していないブラウザ(v4 より前の Chrome、v4 より前の Firefox、IE8、v10.5 より前の Opera、v5 より前の Safari) を使用している場合は、以下のリンクでさまざまなアプローチについて詳しく説明しています。サイトとコーディングスタイルに合ったものを見つけて、それを使用してください。 border-radius

score 81 · Accepted Answer

Stack Overflow の作成の早い段階でこれを調べましたが、下水道を歩いているような気分にさせないような丸みを帯びた角を作成する方法を見つけることができませんでした。

CSS3 は最終的に

border-radius:

これはまさにあなたがそれをどのように機能させたいかです。これは最新バージョンの Safari と Firefox では問題なく動作しますが、IE7 (IE8 では考えられません) や Opera ではまったく動作しません。

その間、それはずっとハックです。現時点で、IE7、FF2/3、Safari3、および Opera 9.5 でこれを行うための最もクリーンな方法について他の人が考えていることを聞くことに興味があります..

score 27 · Accepted Answer

ブラウザがサポートしていない場合、角が平らなコンテンツが表示されます。角の丸みがサイトにとってそれほど重要でない場合は、以下の行を使用できます。

すべてのコーナーを同じ半径で使用したい場合、これは簡単な方法です:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

しかし、隅々までコントロールしたい場合は、これが良いです:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

ご覧のように、各セットにはブラウザー固有のスタイルがあり、4 行目で標準的な方法でこれを宣言します。将来、他のユーザー (できれば IE も) がこの機能を実装して、私たちのスタイルを使用できるようにすることを決定した場合を想定しています。

他の回答で述べたように、これは Firefox、Safari、Camino、Chrome で美しく機能します。

score 16 · Accepted Answer

IE でコーナーを作成することに興味がある場合は、これが役に立つかもしれません - http://css3pie.com/

score 13 · Accepted Answer

背景画像を使用することをお勧めします。他の方法はあまり良くありません: アンチエイリアシングや無意味なマークアップはありません。ここは JavaScript を使用する場所ではありません。

score 11 · Accepted Answer

Brajeshwar が言ったように: border-radiuscss3 セレクターを使用します。ここまでで、Mozilla および Webkit ベースのブラウザーにそれぞれおよびを-moz-border-radius適用できます。-webkit-border-radius

では、Internet Explorer はどうなるでしょうか。Microsoft には、Internet Explorer にいくつかの追加機能を持たせ、より多くのスキルを取得させるための多くの動作があります。

ここ: CSS の値から.htc取得する動作ファイル。例えば。round-cornersborder-radius

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

もちろん、動作セレクターは有効なセレクターではありませんが、条件付きコメントを使用して別の css ファイルに配置できます (IE のみ)。

動作HTCファイル

score 9 · Accepted Answer

CSS3 のサポートが Firefox、Safari、および Chrome の新しいバージョンに実装されているため、「Border Radius」を確認することも役立ちます。

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

他の CSS ショートハンドと同様に、上記も拡張形式で記述できるため、左上、右上などで異なる境界半径を実現できます。

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

score 8 · Accepted Answer

jQuery は、私が個人的にこれに対処する方法です。css のサポートは最小限で、画像は扱いにくいです。jQuery で角を丸くしたい要素を選択できることは、私には完全に理にかなっています。私が最近作業中のプロジェクトに使用したプラグインがあります: http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas

score 6 · Accepted Answer

JavaScriptの方法は常にありますが（他の回答を参照）、それは純粋にスタイリングであるため、これを実現するためにクライアントスクリプトを使用することには反対です。

私が好む方法（制限はありますが）は、CSSを使用してボックスの4つの角に配置する4つの丸い角の画像を使用することです。

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

前述のように、制限があります（丸みを帯びたボックスの背後の背景はプレーンである必要があります。そうしないと、コーナーが背景と一致しません）、それ以外の場合は非常にうまく機能します。

更新：スプライトシートを使用して、インペンションを改善しました。

score 5 · Accepted Answer

これが私が最近行ったHTML/js/cssソリューションです。IEの絶対位置に1pxの丸め誤差があるため、コンテナの幅を偶数ピクセルにする必要がありますが、かなりクリーンです。

HTML：

<div class="s">Content</div>

jQuery：

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS：

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

画像の幅はわずか18ピクセルで、4つの角すべてが一緒に詰め込まれています。円のように見えます。

注：2番目の内側ラッパーは必要ありませんが、段落と見出しのマージンがマージンの折りたたみを維持できるように、内側ラッパーにマージンを使用するのが好きです。jqueryをスキップして、内部ラッパーをhtmlに配置することもできます。

score 5 · Accepted Answer

個人的には、このソリューションが最も気に入っています。IE が曲線の境界線をレンダリングできるようにするための .htc です。

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

score 3 · Accepted Answer

丸みを帯びた角を機能させることがいかに複雑であるかを示すものとして、 Yahooでさえ丸みをお勧めしません(最初の箇条書きを参照)。確かに、彼らはその記事で 1 ピクセルの丸みを帯びた角についてしか話していませんが、専門知識を持つ会社でさえ、ほとんどの場合、それらを機能させるにはあまりにも苦痛であると結論付けているのを見るのは興味深いことです.

それらがなくてもデザインが存続できる場合、それが最も簡単な解決策です。

score 2 · Accepted Answer

確かに、幅が固定されていれば、CSS を使用するのは非常に簡単で、攻撃的でも面倒でもありません。途切れ途切れになるのは、両方向にスケーリングする必要がある場合です。一部のソリューションでは、それを実現するために驚異的な量の div が積み重ねられています。

私の解決策は、角を丸くしたい場合 (当面は)、幅を固定する必要があることを設計者に指示することです。デザイナーは丸みを帯びた角が好きなので (私もそうです)、これは妥当な妥協点だと思います。

score 2 · Accepted Answer

Ruzee Bordersは、すべての主要なブラウザー (Firefox 2/3、Chrome、Safari 3、IE6/7/8) で動作することがわかった唯一の Javascript ベースのアンチエイリアスラウンドコーナーソリューションです。丸みを帯びた要素と親要素の両方に背景画像が含まれています。また、ボーダー、シャドウ、グローイングも行います。

新しいRUZEE.ShadedBorderも別のオプションですが、CSS からスタイル情報を取得するためのサポートがありません。

score 1 · Accepted Answer

「最善」の方法はありません。あなたに合った方法とそうでない方法があります。そうは言っても、CSS + Image ベースの滑らかな角丸テクニックの作成に関する記事をここに投稿しました。

CSS と画像を使用した角の丸いボックス - パート 2

このトリックの概要は、ネストされた DIV と背景画像の繰り返しと配置を使用することです。固定幅のレイアウト (固定幅の伸縮可能な高さ) の場合、3 つの DIV と 3 つの画像が必要です。流動的な幅のレイアウト (伸縮可能な幅と高さ) の場合、9 つの DIV と 9 つの画像が必要です。複雑すぎると考える人もいるかもしれませんが、IMHO はこれまでで最も優れたソリューションです。ハッキングも JavaScript もありません。

score 1 · Accepted Answer

ボーダー半径ソリューションを使用する場合は、サファリ/クロム/FF で動作するようにする css を生成するこの素晴らしい Web サイトがあります。

とにかく、あなたのデザインは丸みを帯びた角に依存するべきではないと思います.Twitterを見ると、IEやoperaユーザーにF ****と言っているだけです. 丸みを帯びた角はあると便利です。個人的には、IE を使用しないクールなユーザーのためにこれを保持しても問題ありません :)。

もちろん、それはクライアントの意見ではありません。ここにリンクがあります：http://border-radius.com/

score 1 · Accepted Answer

上記の htc ソリューションに加えて、IE で角を丸くするための別のソリューションと例を次に示します。

score 0 · Accepted Answer

これについては以前ブログ記事を書きましたので、詳しくはこちらをご覧ください。

<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 が投稿したものと非常に似ていますが、IE 6 固有のハックは含まれておらず、確認したところ、まったく機能していないようです。また、コーナー付近のテキストをブロックしないように、各コーナーの画像の内側を透明にするという別の方法もあります。丸められていない div の境界を覆うことができるように、外側の部分は透明であってはなりません。

また、CSS3 が border-radius で広くサポートされるようになると、それが角を丸くするための公式の最良の方法になります。

score 0 · Accepted Answer

CSS を使用しないでください。jQuery は何度か言及されています。要素の背景と境界線を完全に制御する必要がある場合は、jQuery Background Canvas Pluginを試してみてください。背景に HTML5 Canvas 要素を配置し、必要なすべての背景または境界線を描画できるようにします。丸みを帯びた角、グラデーションなど。

score -1 · Accepted Answer

Opera はまだ border-radius をサポートしていません (バージョン 10 以降のリリースでサポートされるようです)。当面は、CSS を使用して SVG 背景を設定し、同様の効果を作成できます。

cross-browser - CSS を使用して角を丸くする

21 に答える 21

Related

Reference