CSS3は、角を丸め2024 年の最新の入門チュートリアル。このコースでは CSS3は、角を丸め,ブラウザのサポート,CSS3のborder-radiusプロパティ,例,CSS3のborder-半径 - 各フィレットを指定,例,例,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プロパティを使用する」のコーナーを。」
次の3つの例:
1.丸い要素の背景色を指定します。
フィレ!
2.境界要素フィレットを指定します。
フィレ!
3.背景画像要素の切り身を指定します。
フィレ!
次のようにコードは次のとおりです。
あなたはボーダー-radiusプロパティに値を一つだけ指定した場合、それは4フィレットが生成されます。
あなたは四隅に11を指定したい場合しかし、あなたは次のルールを使用することができます。
次の3つの例:
1. 4値 - 国境半径:15ピクセルは50px 30px 5pxの:
2. 3の値 - 国境半径:15ピクセルは50px 30px:
3. 2の値 - 国境半径:15ピクセルは50px:
以下は、ソースコードです:
また、楕円形のコーナーを作成することができます。
プロパティ | 説明 |
---|---|
国境半径 | 国境のすべての四隅 - * - * - 半径のプロパティの頭字語 |
border-top-左半径 | これは、弧の左上隅を定義します |
border-top-右半径 | これは、ラジアンの右上隅を定義します |
border-bottom-右半径 | これは、右下隅の弧を定義します |
border-bottom-左半径 | これは、アークの左下隅を定義します |