立體線框代碼稍加潤色後的效果:
<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