ブートストラップで div 境界線を設定する方法-ブートストラップのチュートリアル-php.cn

ブートストラップで div 境界線を設定する方法

尚

リリース： 2019-07-31 13:14:11

オリジナル

14701 人が閲覧しました

ブートストラップで div 境界線を設定する方法

div 境界線のスタイル:

##border:1px 実線 #FF0000;

は 4 つのバーを意味しますすべて側面は 1 ピクセルの直線の境界線、赤色です。
1px は境界線の幅を表し、実線は直線 (破線を使用できます) を表します。#FF0000 は色の値です。

いくつかの一般的な DIV 境界線スタイル、境界線なし、点線境界線、破線ラインタイプボーダー、直線ボーダー、二重線ボーダー、溝ボーダー、隆起ボーダー、インライン効果ボーダー、はみ出し効果ボーダーなど。

4 つの異なる側面を定義する場合は、

border-top:
border-right:
border-bottom:
border-left: ## を使用します。

#div ボーダースタイル実装コード:

1. 外側の凸ボーダー:

効果:

ログテキスト

コード:

<div style="BORDER-RIGHT: 3px outset;
 BORDER-TOP: 3px outset; 
 BACKGROUND: #ffffff; 
 BORDER-LEFT: 3px outset; 
 WIDTH: 100%; 
 BORDER-BOTTOM: 3px outset; 
 HEIGHT: 100%" align=left>日志文字</DIV>

ログイン後にコピー

コードの説明:

青い部分は変更可能な部分です。1 つずつ説明します:

4 2 は浮き上がった境界線の幅を表します。1 を使用すると、明確ではありません。2または 3 比較するのに適しています;
4 つのアウトセットは、ボーダータイプが「浮き上がっている」ことを示します。これらをインセットまたはダブルに変更すると、それぞれ沈んだボーダーと二重線ボーダーの効果になります。その他の完全なコード効果は以下に示されます;
WIDTH : 100%; HEIGHT: 100% は、このボックスの幅がログの幅の 100% を占めることを意味します。ウィンドウが拡大および縮小すると、ボックスの幅はHEIGHT は高さを表します。さらに、px で表す別の方法もあります。単位はピクセルです。例: WIDTH: 355px は、ボックスの幅が 355 ピクセルであることを意味します。レイアウトが異なると、ログも異なります。幅。ここで与えられた値を参照できます。一般に、パーセンテージで表すことができます。はい、ただし、サイズを決定するためにピクセルを使用する必要がある場合もあるので、耳で聞いてください。
align= left は、ボックス内のコンテンツが左揃えで配置されることを意味します。左を中央に、右を中央揃えと右にそれぞれ変更します。左に揃えたい場合は、align=left を削除できます。デフォルトは左揃えです。
ffffff はボックス内の背景色を表し、ffffff は白を表します (000000 は黒を表します)。色の値はこのテーブルを参照できます。さらに、#ffffff を透明な背景にするには #ffffff を transprant に変更します。個人的には、透明な背景の方がよく使われると思いますが、コピー＆ペーストを容易にするために、透明な背景の枠線コードは次のように指定されています: (ボックス内の赤い部分がコードです)

ログテキスト< ;/DIV> ログテキストはボックス内のログの内容です。コード内で編集する必要はありません。通常のデザインモードに戻り、生成されたボックスをダブルクリックしてボックスに入り、テキストを編集します。

2. 凹面境界線:

コード:

<DIV style="BORDER-RIGHT: 3px inset;
BORDER-TOP: 3px inset; 
BACKGROUND: #ffffff; 
BORDER-LEFT: 3px inset; 
WIDTH: 100%; 
BORDER- BOTTOM: 3px inset; 
HEIGHT: 100%" align=left>日志文字</DIV>

ログイン後にコピー

透明背景の凹面境界線コード:

<DIV style="BORDER- RIGHT: 3px inset; 
BORDER-TOP: 3px inset; 
BACKGROUND: transprant; 
BORDER-LEFT: 3px inset; 
WIDTH: 100%; 
BORDER-BOTTOM: 3px inset; 
HEIGHT: 100%" align=left>日志文字</DIV> 代码

ログイン後にコピー

3. 二重線境界線:

<DIV style="BORDER-RIGHT: 3px double #000000;
 BORDER-TOP: 3px double #000000; 
 BACKGROUND: #ffffff; 
 BORDER-LEFT: 3px double #000000; 
 WIDTH: 100%; 
 BORDER-BOTTOM: 3px double #000000; 
 HEIGHT: 100%" align=left>日志文字</DIV>

ログイン後にコピー

背景透明二重線枠コード:

<DIV style="BORDER-RIGHT: 3px double #000000; 
BORDER-TOP: 3px double #000000; 
BACKGROUND: transprant; 
BORDER-LEFT: 3px double #000000; 
WIDTH: 100%; 
BORDER-BOTTOM: 3px double #000000; 
HEIGHT: 100%" align=left>日志文字</DIV>

ログイン後にコピー

実は、前枠も二重線枠と同じように色を設定できるのですが、個人的にはバンプはエフェクトの色をデフォルトのままにした方が良いです。

4. 点線枠:

<DIV style="BORDER-RIGHT: 2px dashed #000000; 
BORDER-TOP: 2px dashed #000000; 
BACKGROUND: #ffffff; 
BORDER-LEFT: 2px dashed #000000; 
WIDTH: 100%; 
BORDER-BOTTOM: 2px dashed #000000;
 HEIGHT: 100%" align=left>日志文字</DIV>

ログイン後にコピー

透明背景点線枠コード:

<DIV style="BORDER-RIGHT: 2px dashed #000000; 
BORDER-TOP: 2px dashed #000000; 
BACKGROUND: transpant; 
BORDER-LEFT: 2px dashed #000000; 
WIDTH: 100%;
 BORDER-BOTTOM: 2px dashed #000000;
  HEIGHT: 100%" align=left>日志文字</DIV>

ログイン後にコピー

5. 溝立体感枠

<DIV style="BORDER-RIGHT: 7px groove; 
BORDER-TOP: 7px groove; 
BACKGROUND: transprant; 
BORDER-LEFT: 7px groove; 
WIDTH: 100%; BORDER-BOTTOM: 7px groove; 
HEIGHT: 100%" align=left>日志文字</DIV>

ログイン後にコピー

個人的には、この境界線の背景色は透明にするのが最善であると考えており、境界線の太さの値は小さすぎてはならず、そうでないと効果が明白になりません

6. リッジ 3-立体感ボーダー

<DIV style="BORDER-RIGHT: 7px ridge; 
BORDER-TOP: 7px ridge; BACKGROUND: #ffffff; 
BORDER-LEFT: 7px ridge;
 WIDTH: 100%; 
 BORDER-BOTTOM: 7px ridge; 
 HEIGHT: 100%" align=left>日志文字</DIV>

ログイン後にコピー

以上がブートストラップで div 境界線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。