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

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

黄舟
リリース: 2017-07-19 11:18:55
オリジナル
5540 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート