ホームページ > 記事 > ウェブフロントエンド > CSSでdivの境界線を設定する方法
CSS で div 境界線を設定する方法: 最初に HTML サンプル ファイルを作成し、次に div ブロックを定義し、最後に「border-style」属性を使用して境界線スタイルを設定します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター
border 属性は省略された属性です。オールインワンステートメントの境界プロパティを設定します。例: 境界線の幅、境界線のスタイル、境界線の色。
次の属性を順番に設定できます。
border-width: 境界線の幅を指定します。
border-style: 境界線のスタイルを指定します。
border-color: 境界線の色を指定します。
いずれかの値を設定しなくても問題ありません (例: border:solid #ff0000; など)。
ブラウザのサポート
表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。
すべてのブラウザは、border 属性をサポートしています。
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div{ margin: 10px; } div.none { border: none; } div.dotted { border:3px dotted pink; } div.dashed { border:3px dashed paleturquoise; } div.solid { border:3px solid peru; } div.double { border:3px double #009999; } div.groove { border:3px groove #CCC; } div.ridge { border:3px ridge; } div.inset { border:3px inset; } div.outset { border:3px outset; } div.hidden { border: hidden; } </style> </head> <body> <div class="none">无边框。</div> <div class="dotted">虚线边框。</div> <div class="dashed">虚线边框。</div> <div class="solid">实线边框。</div> <div class="double">双边框。</div> <div class="groove">凹槽边框。</div> <div class="ridge">垄状边框。</div> <div class="inset">嵌入边框。</div> <div class="outset">外凸边框。</div> <div class="hidden">隐藏边框。</div> </body> </html>
レンダリング:
推奨学習:「css ビデオ チュートリアル 」
以上がCSSでdivの境界線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。