空间管理您的位置: SupeSite/X-Space官方站 » 菜鸟中的战斗鸟 » 日志

邊框屬性設定

上一篇 / 下一篇 2007-05-13 12:27:20 / 个人分类：强帖收藏

邊框屬性設定

|xp [c4ESH0在CSS中，幾乎所有的元件都可以使用框線設定，不像HTML般，只有表格才可使用框線。我們不但可任意控制框線粗細、顏色，就連框線的形式都可以設定。

BORDER

功能 :設定邊框

語法 : { BORDER : ( border-width )︱( border-style )︱( color ) }

v{)t`M`X0( border-width ) - 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px
( border-style ) - 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線SupeSite/X-Space官方站3t2}W9\%U.A
( color ) - 可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度

範例 : {BORDER:THICK DOUBLE RED}

BORDER-BOTTOM　

功能 : 設定下邊框

/Fu {d q/si,}dNAm0語法 : { BORDER-BOTTOM : ( border-bottom-width )︱( border-style )︱( color ) } SupeSite/X-Space官方站N^C5^:B/rH

$F~,n5r{zZn0範例 : {BORDER-BOTTOM:GROOVE #00FF00} SupeSite/X-Space官方站 o-sy| f[

BORDER-BOTTOM-COLOR

j%R jx3vbWwl0功能 : 設定下邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度

%dvM$pXf-SXv0語法 : { BORDER-BOTTOM-COLOR : ( color ) }

i&b/C1CR-U^CMy0範例 : {BORDER-BOTTOM-COLOR:BLUE} SupeSite/X-Space官方站T(Y(yK'A

BORDER-BOTTOM-STYLE

功能 : 設定下邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )

yX Z7ts2B(r Y0語法 : { BORDER-BOTTOM-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }

範例 : {BORDER-BOTTOM-STYLE:INSET}

BORDER-BOTTOM-WIDTH

%Iy dBRCc~0功能 : 設定下邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )

語法 : { BORDER-BOTTOM-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }

範例 : {BORDER-BOTTOM-WIDTH:1cm}

BORDER-COLOR

5R,[` pv dYBk0功能 : 設定邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度

r|K*QE/U0語法 : { BORDER-COLOR : ( color ) }

l#[(o*R mK0範例 : {BORDER-COLOR:#FFFF00}

BORDER-LEFT

2npVx_A*s0功能 : 設定左邊框

語法 : { BORDER-LEFT : ( border-left-width )︱( border-style )︱( color ) }

範例 : {BORDER-LEFT:THIN OUTSET}

BORDER-LEFT-COLOR

I_0p6F'@0功能 : 設定左邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度 SupeSite/X-Space官方站e%iL{im@

8m4Q9a!oha ^q0語法 : { BORDER-LEFT-COLOR : ( color ) }

範例 : {BORDER-LEFT-COLOR:#00FF00}

BORDER-LEFT-STYLE

功能 : 設定左邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )

9W5QYs`0語法 : { BORDER-LEFT-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }

H?(uc@&P:Gl:q0範例 : {BORDER-LEFT-STYLE:RIDGE} SupeSite/X-Space官方站9U p0TO*J K

BORDER-LEFT-WIDTH

功能 : 設定左邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )

語法 : { BORDER-LEFT-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }

範例 : {BORDER-LEFT-WIDTH:THICK}

BORDER-RIGHT

!t.^TI:Kp0功能 : 設定右邊框

-N6D7|!L-Pnq1jc0語法 : { BORDER-RIGHT : ( border-right-width )︱( border-style )︱( color ) }

"g x3j#Y3s0範例 : {BORDER-RIGHT:10pt #00A}

BORDER-RIGHT-COLOR

功能 : 設定右邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度

B a%uW;cyR$A'}8B0語法 : { BORDER-RIGHT-COLOR : ( color ) }

'o$^%A%b"V2Ti#p_H0範例 : {BORDER-RIGHT-COLOR:#00F}

BORDER-RIGHT-STYLE

#Rnw.F$y#D:Y9M0功能 : 設定右邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )

語法 :
JC/Y.zt&L @x0{ BORDER-RIGHT-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }

範例 :
?lJ/pG~({'E0{BORDER-RIGHT-STYLE:GROOVE}

BORDER-RIGHT-WIDTH

功能 : 設定右邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )

$Rbx*Lf"M H0語法 : { BORDER-RIGHT-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }

範例 : {BORDER-RIGHT-WIDTH:10px}

BORDER-STYLE

功能 : 設定邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )

0Q]Q"b,e-R6Q0語法 : { BORDER-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }

&I P8P!J!^K$w} W0範例 : {BORDER-STYLE:DOUBLE} SupeSite/X-Space官方站%^Yl?UN)Q

BORDER-TOP

功能 : 設定上邊框

\C0m8{ MG'k'w l(W0語法 : { BORDER-TOP : ( border-top-width )︱( border-style )︱( color ) }

範例 : {BORDER-TOP:1in YELLOW} SupeSite/X-Space官方站1C.V)M k,RE;z

BORDER-TOP-COLOR

功能 : 設定上邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度

s S4~g6J h0語法 : { BORDER-TOP-COLOR : ( color ) }

S0R4gMQ@0範例 : {BORDER-TOP-COLOR:RED}

BORDER-TOP-STYLE

功能 : 設定上邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )

語法 : { BORDER-TOP-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET }

G7[(Z k[ b*^0範例 : {BORDER-TOP-STYLE:SOLID}

BORDER-TOP-WIDTH

F+w|xf0功能 : 設定上邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )

語法 : { BORDER-TOP-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }

範例 : {BORDER-TOP-WIDTH:THIN}

BORDER-WIDTH

功能 : 設定邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px )

語法 : { BORDER-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }

範例 : {BORDER-WIDTH:10pt}

綜合範例

<SCRIPT. LANGUAGE="JavaScript">
E,xf,ed%FQ:z0
function change(index)
　{
Sq-Ks G]~9w0　index.style.borderStyle="inset";
)Tm+Uy)T(M?H-P5AB0　index.style.color="blue";
　}
Y#{ YL&sNde0SupeSite/X-Space官方站?X^*{[!N6J
function rechange(index)
(O#F _K&R(d3i rX0　{
#n H{!ERmj[0　index.style.borderStyle="outset";SupeSite/X-Space官方站)Iy@?9\4xv
　index.style.color="black";
"s.`H|Th3ON;_0　}
4A*My9Wl.^0
r:_1KI5hLgB0</SCRIPT>

_0NIGK1b7H0<HTML>

<HEAD>
yM~,\Ai,Fd2V6L0　<STYLE>
　　SPAN {position:absolute;border:outset 3px;SupeSite/X-Space官方站I_ qWE:K9c
　　　　　width:80px;height:22px;cursor:hand;
v;VzR.r&vg_0　　　　　background:url(../Graph/001.jpg);text-align:center;
　　　　　font-size:18px;color:black;font-family:Arial}
6a'[E(^1L4i0　　</STYLE>SupeSite/X-Space官方站zTf8Ep[ o~
</HEAD>
f%w#l3Sq(_9}tIr0<BODY>SupeSite/X-Space官方站+dlo}Y*{ ~
　<SPAN STYLE="top:5px;left:5px" nMouseOver=change(this)
$i&ZKd:VZR*g0　　onMouseOut=rechange(this)>HTML</SPAN>
/xz_|[X*W+?0　<SPAN STYLE="top:35px;left:5px" nMouseOver=change(this)
0}A2d:mR)GY0　　onMouseOut=rechange(this)>CSS</SPAN>
　<SPAN STYLE="top:65px;left:5px" nMouseOver=change(this)
oCSc%B OS0　　onMouseOut=rechange(this)>JScript</SPAN>SupeSite/X-Space官方站kM6A%_.IR#y
　<SPAN STYLE="top:95px;left:5px" nMouseOver=change(this)
　　onMouseOut=rechange(this)>Java</SPAN>
　<SPAN STYLE="top:125px;left:5px" nMouseOver=change(this)
u0s@)MaV5vGJ}8_0　　onMouseOut=rechange(this)>CGI</SPAN>
C#|?lm0H0　<SPAN STYLE="top:155px;left:5px" nMouseOver=change(this)
3l oRI+fu0　　onMouseOut=rechange(this)>ASP</SPAN>
</BODY>
'PF2FEp+B#u)k:J0T"C0</HTML>SupeSite/X-Space官方站1A})Qm)agk