bootstrap如何設定div邊框-Bootstrap教程-PHP中文網

bootstrap如何設定div邊框

尚

發布： 2019-07-31 13:14:11

原創

14742 人瀏覽過

bootstrap如何設定div邊框

div邊框樣式：

#border:1px solid #FF0000;
表示4條邊都是1像素直線邊框，紅色。
1px表示邊框寬度，solid表示直線（虛線可以用dashed），#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>

登入後複製

程式碼說明：
藍色部分為可修改部分，一一說明：
四個2表示凸起邊框的寬度，用1的話不太明顯，2或3比較適當；
四個outset表示邊框類型為"凸起"，如果都改為inset或double，就分別是凹陷邊框和雙線邊框的效果，其他效果下文會給出完整代碼；
WIDTH : 100%; 和HEIGHT: 100%表示這個框的寬度佔日誌寬度的百分之百，當窗口伸縮的時候，框的寬度也會隨著伸縮，HEIGHT表示高度，另外，還有一種表示方法以px為單位的，表示單位為像素，例如：WIDTH: 355px 表示框的寬度為355像素，不同的版式，日誌寬度是不一樣，可參考這裡給定的值，一般的情況下，用百分比表示就可以了，但是有的時候需要用像素來確定大小，見機行事吧；
align=left表示框內內容的排列方式為左對齊，把left分別改成center或right分別為居中對齊和右對齊，如果想左對齊的話，可以把align=left刪掉，缺省情況下是左對齊；
ffffff表示框內的背景色，ffffff表示白色(000000表示黑色)，顏色值可參考這個表來選擇，另外，將#ffffff改為transprant即為透明背景，個人認為透明背景比較常用；為了方便複製貼上，給出透明背景的邊框代碼如下：(框內紅色部分為代碼)

日誌文字為框內的日誌內容，沒有必要在程式碼裡編輯，回到普通設計模式，雙擊產生的框，即可進入框內編輯文字。

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. 脊線立體效果邊框

<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>

登入後複製

以上是bootstrap如何設定div邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！