CSS 角丸
CSS border-radius
CSSでborder-radiusプロパティを使用すると、任意の要素に「角を丸くする」ことができます。
CSSのborder-radiusプロパティ
CSSborder-radiusプロパティは、要素の角の半径を定義します。
ヒント：このプロパティを使用すると、要素に丸みを帯びた角を追加できます!
以下に3つの例を示します。
1 指定された背景色を持つ要素の角を丸くする
2 境界線のある要素の角を丸くする
3 背景画像のある要素の角を丸くする
コードは次のとおりです。
例
ヒント：border-radiusプロパティは、実際にはborder-top-left-radius、border-top-right-radius、border-bottom-right-radiusとborder-bottom-left-radiusプロパティの短縮形プロパティです。
CSS border-radius - 各コーナーを指定
border-radiusプロパティには、1～4つの値を指定できます。ルールは次のとおりです。
4つの値 - border-radius: 15px 50px 30px 5px;(最初の値は左上隅に適用され、2番目の値は右上隅に適用され、3番目の値は右下隅に適用され、4番目の値は左下隅に適用されます)
3つの値 - border-radius: 15px 50px 30px;(最初の値は左上隅に適用され、2番目の値は右上隅と左下隅に適用され、3番目の値は右下隅に適用されます)
2つの値 - border-radius: 15px 50px;(最初の値は左上隅と右下隅に適用され、2番目の値は右上隅と左下隅に適用されます)
1つの値 - border-radius: 15px;(値は、均等に丸められた4つの角すべてに適用されます)
コードは次のとおりです。
例
楕円形のコーナーを作成することもできます
例
CSS border-radiusプロパティ
|
プロパティ |
説明 |
|---|---|
| border-radius | 4つのborder-*-*-radiusプロパティすべてを設定するための簡略プロパティ |
| border-top-left-radius | 左上隅の境界線の形状を定義します |
| border-top-right-radius | 右上隅の境界線の形状を定義します |
| border-bottom-right-radius | 右下隅の境界線の形状を定義します |
| border-bottom-left-radius | 左下隅の境界線の形状を定義します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。