ホームページ  >  記事  >  ウェブフロントエンド  >  div に境界線スタイルを追加するサンプル コードを共有する

div に境界線スタイルを追加するサンプル コードを共有する

黄舟
黄舟オリジナル
2017-07-19 11:18:555474ブラウズ

div に境界線スタイルを追加するにはどうすればよいですか?

div ボックスに境界線スタイルを追加するのは非常に簡単で、境界線プレート スタイルを使用するだけです。

1. 点線と実線の境界線 - TOP

境界点のスタイル: 破線
境界線の実装スタイル: 実線

border:1px dashed #000

はオブジェクトの境界線の幅を1pxに設定することを表します 黒の破線の境界線

border:1px solid #000


はオブジェクトの境界線の幅を1pxに設定することを表しますblack 境界線を認識します

2. div の上部に境界線を追加します - TOP

div の上部に 1px の黒い境界線を追加します

div{border-top:1px solid #000}

3. div の下部に境界線を追加します - TOP

div ボックスの下部に 2 ピクセルの赤い点線の境界線を追加します

div{border-bottom:2px dashed #F00}

4. div ボックスの左側に境界線を追加します - TOP

CSS セレクターの CSS 名「.divcss5」を指定し、青色の 1 ピクセルを追加しますボックスの左側に実線の境界線を追加します

.divcss5{ border-left:1px solid #00F}

DIV コード:

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>

5. ボックスに div を追加します 右側に境界線を追加します - TOP

div の右側に 1 ピクセルの赤い実線の境界線を追加しますobject

div{ border-right:1px solid #F00}

6. ボックスの上部と下部に境界線を追加します - TOP

ボックスの上部と下部に 1px を追加して、黒い境界線を実現します

div{border-top:1px solid #000;border-bottom:1px solid #000}

7. 左側と右側に境界線を追加しますdiv ボックスの境界線 - TOP

ボックスの左右に 2 ピクセルの緑色の点線境界線を追加します

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}

8. div ボックスの 4 辺に境界線を追加します - TOP

ボックスの 4 つの辺に 3 ピクセルを追加しますDIV で黒枠を実現

div{ border:3px solid #000}

以上がdiv に境界線スタイルを追加するサンプル コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。