ホームページ > 記事 > ウェブフロントエンド > CSSで丸い枠線を設定する方法
CSS で丸い枠線を設定する方法は、丸い枠線 [border-radius] を使用することです。これら 4 つのラジアンの角丸が同じである場合は、[border-radius: 30px] と書くことができます。 ;]。
このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。
CSS で丸い境界線を設定する方法:
丸い境界線の基本的な使用法 (border-radius):
最も基本的な丸い境界線使用法は、同じ円弧を持つ 4 つの丸い角を設定することです。
boder-top-left-radius:30px; //左上角 boder-top-right-radius:30px; //右上角 boder-bottom-left-radius:30px; //右下角 boder-bottom-right-radius:30px; //左下角
4 つの丸い角が同じ場合、次のように記述できます:
border-radius:30px;
css丸い境界線を設定します:
css パート:
.div1{ margin:0 auto; background: darkcyan; width:200px; height:200px; border:2px solid darkslategray; border-radius:30px; text-align: center; line-height: 200px; }
html パート:
<div class="div1">圆角边框</div>
効果は次のとおりです:
推奨される関連チュートリアル: CSS ビデオチュートリアル
以上がCSSで丸い枠線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。