ホームページ > 記事 > ウェブフロントエンド > CSS枠線を丸枠に書く方法
CSS枠線を丸枠に書く方法
- WBOYオリジナル
- 2021-11-12 11:44:568245ブラウズ
記述方法: 1. ボーダーに「border-radius: 角丸値;」スタイルを追加して角丸サイズを一律に設定; 2. 「border-top-left-radius: 角丸値;」を追加"、"border -top-right-radius: fillet value;" およびその他のスタイルは、それぞれ 4 隅のフィレット サイズを設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
丸枠に CSS 枠を記述する方法
丸枠 (border-radius) の基本的な使用法: border-radius 属性は略語属性。四隅の丸みの属性を設定するために使用されます。
丸い境界線の最も基本的な使用法は、4 つの丸い角を同じ円弧で設定することです。
border-top-left-radius：30px； //左上角 border-top-right-radius：30px； //右上角 border-bottom-left-radius：30px； //右下角 border-bottom-right-radius：30px； //左下角
4 つの丸い角が同じ場合は、次のように記述できます:
border-radius：30px；
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.div1{
margin:0 auto;
background: darkcyan;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="div1">圆角边框</div>
</body>
</html>出力結果:
プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！
以上がCSS枠線を丸枠に書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでナビゲーションバーを修正する方法次の記事：CSSでナビゲーションバーを修正する方法