CSS3は、角を丸め
CSS3は、角を丸め
、あなたが任意の要素にすることができCSS3のborder-radiusプロパティを使用する」のコーナーを。」
ブラウザのサポート
表中の数字は、プロパティバージョン番号をサポートする最初のブラウザを表します。
-webkit-または-moz-前の図は、プレフィックスの最初のバージョンへの支持を表明しました。
| 属性 | |||||
|---|---|---|---|---|---|
| border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3のborder-radiusプロパティ
、あなたが任意の要素にすることができCSS3のborder-radiusプロパティを使用する」のコーナーを。」
次の3つの例：
1.丸い要素の背景色を指定します。
フィレ！
2.境界要素フィレットを指定します。
フィレ！
3.背景画像要素の切り身を指定します。
フィレ！
次のようにコードは次のとおりです。
例
＃のrcorners1 {
国境半径：25ピクセル;
背景：＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
＃のrcorners2 {
国境半径：25ピクセル;
ボーダー：2ピクセル固体＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
＃のrcorners3 {
国境半径：25ピクセル;
背景：のURL（paper.gif）。
背景位置：左上;
背景リピート：リピート;
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
国境半径：25ピクセル;
背景：＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
＃のrcorners2 {
国境半径：25ピクセル;
ボーダー：2ピクセル固体＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
＃のrcorners3 {
国境半径：25ピクセル;
背景：のURL（paper.gif）。
背景位置：左上;
背景リピート：リピート;
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
»をお試しください
CSS3のborder-半径 - 各フィレットを指定
あなたはボーダー-radiusプロパティに値を一つだけ指定した場合、それは4フィレットが生成されます。
あなたは四隅に11を指定したい場合しかし、あなたは次のルールを使用することができます。
- 四つの値：トップが第1の値の角を左に、2番目の値は、右上隅で、右下隅は、第三であり、そして第四は、左下隅です。
- 三つの値：トップが第1の値の角を左に、2番目の値は、右上と左下で、3番目の値の右下隅
- 二つの値：最初は左上と右下の隅であり、第二は、右上隅と左下隅です
- 値：同じ4つの丸めた値
次の3つの例：
1. 4値 - 国境半径：15ピクセルは50px 30px 5pxの：
2. 3の値 - 国境半径：15ピクセルは50px 30px：
3. 2の値 - 国境半径：15ピクセルは50px：
以下は、ソースコードです：
例
＃のrcorners4 {
国境半径：15ピクセルは50px 30px 5pxの ;
背景：＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
＃のrcorners5 {
国境半径：15ピクセルは50px 30px;
背景：＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
＃のrcorners6 {
国境半径：15ピクセルは50px;
背景：＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
国境半径：15ピクセルは50px 30px 5pxの ;
背景：＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
＃のrcorners5 {
国境半径：15ピクセルは50px 30px;
背景：＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
＃のrcorners6 {
国境半径：15ピクセルは50px;
背景：＃8AC007。
パディング：20ピクセル;
幅：200pxの;
高さ：150ピクセル;
}
»をお試しください
また、楕円形のコーナーを作成することができます。
例
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
»をお試しください
CSS3は、コーナーのプロパティを丸め
| プロパティ | 説明 |
|---|---|
| 国境半径 | 国境のすべての四隅 - * - * - 半径のプロパティの頭字語 |
| border-top-左半径 | これは、弧の左上隅を定義します |
| border-top-右半径 | これは、ラジアンの右上隅を定義します |
| border-bottom-右半径 | これは、右下隅の弧を定義します |
| border-bottom-左半径 | これは、アークの左下隅を定義します |