CSS3角丸
CSS3とborder-radiusプロパティには、任意の要素「丸い角」を与えることができます。
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は続い-webkit-または-moz-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radiusプロパティ
CSS3を使用すると、任意の要素を与えることができます使用することにより、「角を丸めた「 border-radiusプロパティを。
ここでは3つの例は以下のとおりです。
指定された背景色で要素の1。丸みを帯びた角：
丸みを帯びた角！
国境を持つ要素2.丸みを帯びた角：
丸みを帯びた角！
背景画像に対応する要素を3丸みを帯びた角：
丸みを帯びた角！
ここでは、コードは次のとおりです。
例
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
} »それを自分で試してみてください  | ヒント： border-radiusプロパティは、実際の短縮形プロパティであるborder-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radiusとborder-bottom-left-radius特性。 |
|---|
CSS3 border-radius -各コーナーを指定します
あなたが1つの値だけを指定した場合border-radiusプロパティを、この半径は、すべての4コーナーに適用されます。
ただし、ご希望があれば個別に各コーナーを指定することができます。 ここでのルールは以下のとおりです。
- 四つの値：最初の値は、左上に適用され、第二の値が右上に適用され、第3の値は右下に適用され、第4の値は、左下隅に適用されます
- 三つの値：最初の値は、左上に適用され、第二の値は、右上と左下に適用され、第3の値が右下に適用されます
- 二つの値：最初の値は、左上と右下の隅に適用され、2番目の値は、右上と左下隅に適用されます
- 一つの値：すべての四隅が同じように丸められています
ここでは3つの例は以下のとおりです。
1.フォー値- border-radius: 15px 50px 30px 5px ：
2. 3つの値- border-radius: 15px 50px 30px ：
3. 2つの値- border-radius: 15px 50px ：
ここでは、コードは次のとおりです。
例
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} »それを自分で試してみてください また、楕円形のコーナーを作成することができます。
例
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} »それを自分で試してみてください 練習で自分自身をテスト！
CSS3角丸のプロパティ
| プロパティ | 説明 |
|---|---|
| border-radius | - * - * - 半径のプロパティをすべての4つの境界線を設定するための簡略記述特性 |
| border-top-left-radius | 左上隅の境界線の形状を定義します |
| border-top-right-radius | 右上隅の境界線の形状を定義します |
| border-bottom-right-radius | 右下隅の境界線の形状を定義します |
| border-bottom-left-radius | 左下の境界線の形状を定義します |