CSSで枠線を角丸に設定する方法-フロントエンドQ&A-php.cn

CSSで枠線を角丸に設定する方法

青灯夜游

リリース： 2023-02-17 14:13:18

オリジナル

14708 人が閲覧しました

CSS では、border-radius 属性を使用して境界線を角丸に設定できます。4 つの角を丸く設定するには、border 要素に「border-radius:radius value;」スタイルを追加するだけです。半径、境界線の 4 つの角すべてを丸い角に設定します。

CSSで枠線を角丸に設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS で丸い境界線を設定する最も一般的かつ簡単な方法は、border-radius 属性を使用することです。

CSS の角丸には、border-radius (「境界線の半径」を意味します) という 1 つのプロパティを設定するだけで済みます。このプロパティに値を指定して、4 隅すべての半径を同時に設定します。すべての法的な CSS 測定値 (em、ex、pt、px、パーセントなど) を使用できます。

border-radius は同時に 1 ～ 4 の値を設定できます:

1 つの値を設定すると、4 つのフィレットすべてがこれを使用することを意味します価値。

<!DOCTYPE html>
<html>
<head>
<style> 
div{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px; 
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSSで枠線を角丸に設定する方法

値が 2 つ設定されている場合、左上を意味します角と右下角が使用されます。最初の値が使用され、右上角と左下角には 2 番目の値が使用されます。
3 つの値が設定されている場合、左上隅は最初の値を使用し、右上隅と左下隅は 2 番目の値を使用し、右下隅は 2 番目の値を使用することを意味します3 番目の値を使用します。
4 つの値が設定されている場合、左上隅、右上隅、右下隅、左下隅 (時計回りの順) に対応します。

border-radius では、スラッシュを使用して 2 番目の値セットを設定することもできます。最初の値のセットは水平方向の半径を表し、2 番目の値のセットは垂直方向の半径を表します。 2 番目の値セットも 1 ～ 4 個の値を同時に設定でき、適用ルールは最初の値セットと同じです。

関連する推奨事項: 「css ビデオチュートリアル」

以上がCSSで枠線を角丸に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。