ホームページ > 記事 > ウェブフロントエンド > ブートストラップで div 境界線を設定する方法
div 境界線のスタイル:
は 4 つのバーを意味します すべて側面は 1 ピクセルの直線の境界線、赤色です。
1px は境界線の幅を表し、実線は直線 (破線を使用できます) を表します。#FF0000 は色の値です。
いくつかの一般的な DIV 境界線スタイル、境界線なし、点線境界線、破線ラインタイプボーダー、直線ボーダー、二重線ボーダー、溝ボーダー、隆起ボーダー、インライン効果ボーダー、はみ出し効果ボーダーなど。
4 つの異なる側面を定義する場合は、border-top:
border-right:
border-bottom:
border-left: ## を使用します。
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>
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 に変更します。個人的には、透明な背景の方がよく使われると思いますが、コピー&ペーストを容易にするために、透明な背景の枠線コードは次のように指定されています: (ボックス内の赤い部分がコードです)
6e4517eec9cfd14b3742421dd2982df1ログテキスト0d6c4ccaf8887fb4e335c08d95a545f8 ログ テキストはボックス内のログの内容です。コード内で編集する必要はありません。通常のデザイン モードに戻り、生成されたボックスをダブルクリックしてボックスに入り、テキストを編集します。
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> 代码
<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>
<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 サイトの他の関連記事を参照してください。