CSS3の角丸(border-radius)詳細説明_html/css_WEB-ITnose

Web ページを作成するとき、以前の方法では画像を切り取る必要がよくありましたが、CSS3 の境界線の半径機能を使用すると、境界線の丸みを帯びた効果を非常に簡単に実現できます。複数の利点があります: まず、Web サイトのメンテナンスの負荷が軽減され、2 番目に、画像の HTTP リクエストがなくなることで Web ページの読み込み速度が向上し、3 番目に視覚的な美しさが向上します。

border-radius は略語です。また、4つの値は左上、右上、右下、左下の順に設定されます。主に以下の状況が発生します:

1. 値は 1 つだけです。次に、左上、右上、右下、左下の 4 つの値は等しいです。

2. 2 つの値があり、top-left はbottom-right と等しく、最初の値を受け取り、top-right はbottom-left と等しく、2 番目の値を受け取ります

3. 3 つの値があります。このうち、最初の値は左上に設定され、2 番目の値は右上と左下に設定され、それらは等しくなります。3 番目の値は右下に設定されます。

4. 値は 4 つあり、最初の値は左上に設定し、2 番目の値は右上に、3 番目の値は右下に、4 番目の値は左下に設定します。

実際、border-radius は border と同じプロパティを持っています。つまり、次の 4 つの書き方をここで標準化します。 X 軸。詳細については、以下を参照してください:

border-top-left-radius: <length>  <length>   //左上角border-top-right-radius: <length>  <length>  //右上角border-bottom-right-radius:<length>  <length>  //右下角border-bottom-left-radius:<length>  <length>   //左下角

border-radius は、次のバージョンのブラウザでのみサポートされています: Firefox4.0 以降、Safari 5.0 以降、Google Chrome 10.0 以降、Opera 10.5 以降、IE9 以降。 border-radius の標準構文形式は古いバージョンのブラウザでサポートされており、border-radius はブラウザ カーネルに応じて異なるプレフィックスを追加する必要があります。たとえば、Mozilla カーネルでは「-moz」を追加する必要があり、Webkit カーネルでは「」を追加する必要があります。古いブラウザの場合は、さまざまなカーネル ブラウザでの border-radius の記述形式を見てみましょう:

1. Mozilla (Firefox、Flock)

-moz-border-radius-topleft: //左上角-moz-border-radius-topright: //右上角-moz-border-radius-bottomright: //右下角-moz-border-radius-bottomleft: //左下角

等价于：-moz-border-radius: //简写

2. WebKit (Safari、Chrome およびその他のブラウザ)

-webkit-border-top-left-radius:  //左上角-webkit-border-top-right-radius:  //右上角-webkit-border-bottom-right-radius:  //右下角-webkit-border-bottom-left-radius:  // 左下角

 等价于：-webkit-border-radius:  //简写

3. Opera ブラウザ:

border-top-left-radius: //左上角border-top-right-radius: //右上角border-bottom-right-radius: //右下角border-bottom-left-radius: //左下角

等价于：border-radius: //简写

4. トライデント (IE)

IE9 以下のバージョンはborder-radiusをサポートしておらず、IE9にはプライベートフォーマットがありませんが、どちらもborder-radiusを使用しており、記述方法はOperaと同じであるため、ここでは繰り返しません。

新しいか古いかに関係なく、すべてのカーネル ブラウザが border-radius 属性をサポートするには、border-radius 形式を次のように変更する必要があります:

-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

特定のアプリケーションで分割する 対応する形式には - を追加する必要があります。上記のコードは、実際には次のコードと同等です:

-moz-border-radius-topleft: <length> <length> //左上角-moz-border-radius-topright: <length> <length> //右上角-moz-border-radius-bottomright: <length> <length> //右下角-moz-border-radius-bottomleft: <length> <length> //左下角-webkit-border-top-left-radius:  <length> <length> //左上角-webkit-border-top-right-radius:  <length> <length> //右上角-webkit-border-bottom-right-radius: <length> <length> //右下角-webkit-border-bottom-left-radius:  <length> <length> // 左下角border-top-left-radius: <length> <length> //左上角border-top-right-radius: <length> <length> //右上角border-bottom-right-radius: <length> <length> //右下角border-bottom-left-radius: <length> <length> //左下角

一般的な要件は次のとおりです:

.demo { width: 150px; height: 80px; border: 2px solid #f36; background: #ccc;}

ただし、場合によっては、次のように個別に逆アセンブルする必要もあります。

.demo { border-top-left-radius: 10px 20px; border-top-right-radius: 15px 30px; border-bottom-right-radius: 20px 10px; border-bottom-left-radius: 30px 15px;}

効果は次のとおりです:

サポートされているブラウザ:

詳細を確認したい場合は、リンクアドレス: