ホームページ > 記事 > ウェブフロントエンド > CSS枠線を丸枠に書く方法
記述方法: 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 サイトの他の関連記事を参照してください。