ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSで枠線を角丸に設定する方法
CSSで枠線を角丸に設定する方法
- 青灯夜游オリジナル
- 2021-09-14 16:21:3314701ブラウズ
CSS では、border-radius 属性を使用して境界線を角丸に設定できます。4 つの角を丸く設定するには、border 要素に「border-radius:radius value;」スタイルを追加するだけです。半径、境界線の 4 つの角すべてを丸い角に設定します。
このチュートリアルの動作環境: 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>レンダリング:
値が 2 つ設定されている場合、左上を意味します角と右下角が使用されます。 最初の値が使用され、右上角と左下角には 2 番目の値が使用されます。
3 つの値が設定されている場合、左上隅は最初の値を使用し、右上隅と左下隅は 2 番目の値を使用し、右下隅は 2 番目の値を使用することを意味します3 番目の値を使用します。
4 つの値が設定されている場合、左上隅、右上隅、右下隅、左下隅 (時計回りの順) に対応します。
border-radius では、スラッシュを使用して 2 番目の値セットを設定することもできます。最初の値のセットは水平方向の半径を表し、2 番目の値のセットは垂直方向の半径を表します。 2 番目の値セットも 1 ～ 4 個の値を同時に設定でき、適用ルールは最初の値セットと同じです。
関連する推奨事項: 「css ビデオ チュートリアル 」
以上がCSSで枠線を角丸に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。