天天看點

div 邊框

立體線框代碼稍加潤色後的效果:

<div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge;

border-bottom-style:Ridge;border-width: 7pt; background-color:#8B008B"><div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>

      效果如框内所示,是帶背景色(熏衣草色)的浮出。

代碼配色後的效果如下:

<DIV style="BORDER-RIGHT: 5pt ridge; BORDER-TOP: 5pt ridge; BORDER-LEFT: 5pt ridge; BORDER-BOTTOM: 5pt ridge; BACKGROUND-COLOR: #a0522d">

<DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffc0cb">文字</DIV></DIV>

背景為粉紅色,效果如框内所示。

<DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdab9">文字</DIV></DIV>

背景為桃色,效果如框内所示。

<div STYLE="border-style:outset;border-width:2pt; border-color: red">

<div style="width:100%;height:100%;background-color:#ffdead;">日志文字

</div></div>

     使用上述文法将會為你呈現一個NAVAJO白底色紅邊框的浮出線效果背景,效果如框内顯示。

以下代碼來源于:午後の紅茶部落格

簡單線條邊框,代碼:<div style="border:1px solid #f990033;">文字内容</div>

簡單線條邊框,代碼:<div style="border-style:outset; border-width:1px;">文字内容</div>

雙線邊框,代碼:<div style="border:3px double #990033;">文字内容</div>

虛線邊框,代碼:

<div style="border:1px dashed #990033;">文字内容</div>

1,代碼說明:

border 後面的數字是指邊框的粗細,

dashed 指邊框樣式,

#000000 為邊框顔色。

可以自己更換數字改變邊框粗細,和顔色。多試幾次!

2,代碼使用方法∶

進入發表文章點選「顯示源代碼」

将選擇的邊框代碼貼入

勾掉「顯示源代碼」

可以在代碼中寫字

                           也可以直接在邊框中寫字或貼圖。

白菜附幾種邊框顔色代碼:

#FF4500

#FF4040

#FF3E96

#FF34B3

#FF3030

#FF1493

#FF00FF

#FF0000

#A9A9A9

#A8A8A8

#A6A6A6

#A52A2A

#A4D3EE

#A3A3A3

#A2CD5A

#A2B5CD

#A1A1A1

#A0522D

#A020F0

#9FB6CD

#9F79EE

#9E9E9E

#9C9C9C

#9BCD9B

#9B30FF

#9AFF9A

#9ACD32

#9AC0CD

#9A32CD

#999999

#9932CC

#98FB98

#98F5FF

#97FFFF

#96CDCD

#969696

#949494

#9400D3

#9370DB

#919191

#0F0F0F

#0D0D0D

#0A0A0A

#080808

#050505

#030303

#00FFFF

#00FF7F

#00FF00

#00FA9A

#00F5FF

#00EEEE

#00EE76

#00EE00

#00E5EE

#00CED1

#00CDCD

#00CD66

#00CD00

#00C5CD

#00BFFF

#00B2EE

#009ACD

#008B8B

#008B45

#008B00

#00868B

#00688B

#006400

#0000FF

#0000EE

#0000CD

#0000AA

#00008B

#000080

#000000

繼續閱讀