最も予想されるCSS3プロパティの1つは、間違いなくborder-radiusプロパティです。 border-radiusプロパティを使用すると、画像を使用せずに、CSSのみを使用して最近人気のある角丸四角形を作成できます。
ブラウザー間の互換性。
残念ながら、CSS3はまだすべてのブラウザーでサポートされているわけではありません。 border-radiusプロパティは、Firefox（バージョン1.0以降）、Safari（バージョン3.1以降）、Chrome（非常に最初のバージョン）でサポートされていますが、Internet ExplorerとOpera（Opera 10で実装予定）ではサポートされていません。
CSS3はまだ標準ではないため、それをサポートするブラウザーで動作するように、border-radiusプロパティのプレフィックスを追加する必要があります。 Firefoxで動作させるには、-moz-border-radiusスタイルで記述する必要があります。Safari/ Chromeの場合、このプロパティは-webkit-border-radiusのようになります。
Firefox、Safari、およびChromeはこのプロパティをサポートしますが、わずかに異なる方法で実装することに注意してください。 最初にFirefoxでどのように実装されるかを示し、次にSafariとChromeの違いを説明します。
最初に、border-radiusプロパティを使用する単純なブロックを作成します。
<body>
<div id="box"></div>
</body>
CSSでは、高さ、幅、背景色を設定します。
#box {
width:590px;
height:100px;
background-color:#6B86A6; }
border-radiusプロパティを追加します。
border-radiusプロパティは、marginおよびpaddingプロパティのように宣言されます。 このプロパティの短いレコードを、長方形の4つの角すべてに対して使用することも、各角に対して個別に使用することもできます。 簡単に書き込むと、角度ごとに1つの値が示されます。
#box {
-moz-border-radius: 20px;
}
これで、4つの角すべての半径が20pxになります。
2つの値を指定することもできます。最初の値は、左上隅と右下隅の半径を決定し、2番目は右上隅と左下隅の半径を決定します。
#box {
-moz-border-radius:20px 40px;
}
3つまたは4つの値を指定した場合、それらは次の順序で適用されます-左上隅、右上隅、右下隅、左下隅。
#box {
-moz-border-radius:10px 20px 30px 40px;
}
各コーナーのborder-radiusプロパティを宣言します
このプロパティを1つのコーナーのみに使用する場合は、プロパティに適切な末尾を追加するだけです。
- 左上隅のmoz-border-radius-topleft。
- 右上隅のmoz-border-radius-topright。
- 右下隅のmoz-border-radius-bottomright;
- 左下隅のmoz-border-radius-bottomleft;
水平および垂直半径
このプロパティは、1/4楕円角を作成するためにも使用できます。 これを行うには、目的の角度の2番目の値を追加します。
#box {
-moz-border-radius-topleft: 30px 15px;
}
写真でわかるように、左上隅はわずかに「面取り」されています。 これは、これら2つの値がそれぞれ水平および垂直半径を定義するためです。 単一の値が使用される場合、ブラウザは水平および垂直の両方の半径でそれを解釈します。
このプロパティを簡単に記述すると、水平および垂直半径の値はスラッシュで区切られます。
#box {
-moz-border-radius: 30px / 15px;
}
#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}
SafariおよびChromeでborder-radiusプロパティを使用します。
SafariとChromeはわずかに異なる構文を使用しますが、主な違いは-mozの代わりに-webkitプレフィックスを使用することです：
- -webkit-border-top-left-radius、左上隅;
- -右上隅のwebkit-border-top-right-radius。
- -右下隅のwebkit-border-bottom-right-radius。
- -左下隅のwebkit-border-bottom-left-radius。
短いレコードを使用する場合、すべての角度の値が等しい場合にのみ使用できることに注意してください。値が異なる場合は、各角度のプロパティを指定する必要があります。
このコードは、SafariおよびChromeでは機能しません。
#box {
-webkit-border-radius: 10px 20px 30px 40px;
}
正しいコードは次のようになります。
#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
}
SafariおよびChromeの水平および垂直半径。
SafariおよびChromeでは、水平および垂直の半径を指定することもできます。
#box {
-webkit-border-top-left-radius: 30px 15px;
}
短い記録の場合、これらの値が各コーナーで同じである場合にのみ、長方形のすべてのコーナーの水平および垂直半径を指定できます。 また、スラッシュを使用する必要はありません。
#box {
-webkit-border-radius: 30px 15px;
}
例。