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

邊框屬性設定

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

邊框屬性設定

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

BORDER

yZe{@0功能 :設定邊框

語法 : { BORDER : ( border-width )︱( border-style )︱( color ) } SupeSite/X-Space官方站Z0Vp R8@ ol

( border-width ) - 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px
$w2qgB-?$K[_W0( border-style ) - 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線
%l4ySy$QmI7w0( color ) - 可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度

0~$Rj8E? {9vm6E0範例 : {BORDER:THICK DOUBLE RED} SupeSite/X-Space官方站&oWY-W~{ qF

BORDER-BOTTOM　

2K5LWDkFcT0功能 : 設定下邊框 SupeSite/X-Space官方站*L~QvTI

2n:~v8dR`"Y0T0語法 : { BORDER-BOTTOM : ( border-bottom-width )︱( border-style )︱( color ) }

範例 : {BORDER-BOTTOM:GROOVE #00FF00}

BORDER-BOTTOM-COLOR

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

語法 : { BORDER-BOTTOM-COLOR : ( color ) } SupeSite/X-Space官方站4DY3x.m3f

n+}%Q+xk`V6V z0範例 : {BORDER-BOTTOM-COLOR:BLUE}

BORDER-BOTTOM-STYLE

1M4I d*z+J!q~X:{0功能 : 設定下邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )

XU#m-}g$W0語法 : { BORDER-BOTTOM-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET } SupeSite/X-Space官方站d:wdeo

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

BORDER-BOTTOM-WIDTH

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

g8P:U%G4jt0語法 : { BORDER-BOTTOM-WIDTH : THIN︱MEDIUM︱THICK︱( length ) } SupeSite/X-Space官方站6GV5Dj2^

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

BORDER-COLOR

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

,p.M7RfK3O#t0語法 : { BORDER-COLOR : ( color ) } SupeSite/X-Space官方站8v bz-N8K.Sf

x/AR;LJ%Ob0範例 : {BORDER-COLOR:#FFFF00}

BORDER-LEFT

功能 : 設定左邊框

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

範例 : {BORDER-LEFT:THIN OUTSET}

BORDER-LEFT-COLOR

YU8\K6~:`.va:K9A0功能 : 設定左邊框顏色，可設為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度 SupeSite/X-Space官方站F'oGsD9KO

語法 : { BORDER-LEFT-COLOR : ( color ) }

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

BORDER-LEFT-STYLE

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

語法 : { BORDER-LEFT-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET } SupeSite/X-Space官方站t2Kct^yaG

.f4T%X%c;^3oqt0範例 : {BORDER-LEFT-STYLE:RIDGE}

BORDER-LEFT-WIDTH

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

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

9B8Gn!G:zDs0範例 : {BORDER-LEFT-WIDTH:THICK}

BORDER-RIGHT

功能 : 設定右邊框 SupeSite/X-Space官方站z6t6u!B-G(B#b

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

8L9XwS F!y0範例 : {BORDER-RIGHT:10pt #00A} SupeSite/X-Space官方站 O3J1a pfc

BORDER-RIGHT-COLOR

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

VxfOhoUR9k0語法 : { BORDER-RIGHT-COLOR : ( color ) }

i+p)SG;ecbOb0範例 : {BORDER-RIGHT-COLOR:#00F}

BORDER-RIGHT-STYLE

功能 : 設定右邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 ) SupeSite/X-Space官方站V]0x JM

#{`)wE(e:?_f^0語法 :SupeSite/X-Space官方站/`9E6bk.[m
{ BORDER-RIGHT-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET } SupeSite/X-Space官方站I!~o$?2s&k

iyMf0`0範例 :
{BORDER-RIGHT-STYLE:GROOVE}

BORDER-RIGHT-WIDTH

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

+M"wM%D9twMc0語法 : { BORDER-RIGHT-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }

3y}a Mx7\+H e,t#c0範例 : {BORDER-RIGHT-WIDTH:10px}

BORDER-STYLE

6C*Pf}'ZL2b7X0功能 : 設定邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 )

8W;JX7iQI3C!pc"Djs0語法 : { BORDER-STYLE : NONE︱SOLID︱DOUBLE︱GROOVE︱RIDGE︱INSET︱OUTSET } SupeSite/X-Space官方站)L_W!R_&i8A

4Y5S#~{'ZH9i2Y0範例 : {BORDER-STYLE:DOUBLE}

BORDER-TOP

fM&@HBM^0功能 : 設定上邊框

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

'\v0OWc0範例 : {BORDER-TOP:1in YELLOW}

BORDER-TOP-COLOR

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

-bV+Tfp;tJ}i)u0語法 : { BORDER-TOP-COLOR : ( color ) }

範例 : {BORDER-TOP-COLOR:RED}

BORDER-TOP-STYLE

功能 : 設定上邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 ) SupeSite/X-Space官方站AI#jb([{Z

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

'Z@'M)k(|m4E"\0範例 : {BORDER-TOP-STYLE:SOLID}

BORDER-TOP-WIDTH

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

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

hIS6dL H0範例 : {BORDER-TOP-WIDTH:THIN} SupeSite/X-Space官方站U*]$l_5jz{

BORDER-WIDTH

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

R2bJ+rw,@zqYHR!\0語法 : { BORDER-WIDTH : THIN︱MEDIUM︱THICK︱( length ) }

範例 : {BORDER-WIDTH:10pt}

綜合範例

|3o X~,k0<SCRIPT. LANGUAGE="JavaScript">

0F+lkL/E f0function change(index)
Bj SyNW-b0　{
F+K0n7As lEEM0　index.style.borderStyle="inset";
Gl ~)O"MHj;s6d0　index.style.color="blue";
　}
'K Nvr/S$G c'pM!P F0SupeSite/X-Space官方站%z4US `#^_%P
function rechange(index)
*k+?e3hYJr$K0　{
fL yPQ0　index.style.borderStyle="outset";
-muM@V:I5u.c0K.x+|0　index.style.color="black";
CJ$j,Pmjq0　}

</SCRIPT>

(V G%J gy1d|0<HTML>

n&W&i3e&w/]!O!c,_ a0<HEAD>
2Uwj%S xt:t,iN]0　<STYLE>
8Hh!M(XXp5UCA0　　SPAN {position:absolute;border:outset 3px;
:tW&x.n?!i Q}0　　　　　width:80px;height:22px;cursor:hand;SupeSite/X-Space官方站u,G8gU4G-M
　　　　　background:url(../Graph/001.jpg);text-align:center;
　　　　　font-size:18px;color:black;font-family:Arial}
1q2Ft0l(F0　　</STYLE>
)_6i X(Xq0s8hQMM-J.C0</HEAD>
<BODY>
.fi3{H-w}&V\4I0　<SPAN STYLE="top:5px;left:5px" nMouseOver=change(this)
plE:Oa{0　　onMouseOut=rechange(this)>HTML</SPAN>
_Z?P*rza$\0　<SPAN STYLE="top:35px;left:5px" nMouseOver=change(this)
　　onMouseOut=rechange(this)>CSS</SPAN>
　<SPAN STYLE="top:65px;left:5px" nMouseOver=change(this)
　　onMouseOut=rechange(this)>JScript</SPAN>
|h2x|!t5?0　<SPAN STYLE="top:95px;left:5px" nMouseOver=change(this)
| V;T*kV&Z0　　onMouseOut=rechange(this)>Java</SPAN>
2kk8n?$ew0　<SPAN STYLE="top:125px;left:5px" nMouseOver=change(this)SupeSite/X-Space官方站/he1`2bD G
　　onMouseOut=rechange(this)>CGI</SPAN>SupeSite/X-Space官方站2Ehh+wLs
　<SPAN STYLE="top:155px;left:5px" nMouseOver=change(this)
4O\1YLz)R0iq0　　onMouseOut=rechange(this)>ASP</SPAN>
</BODY>SupeSite/X-Space官方站 GV&` R|+vR
</HTML>SupeSite/X-Space官方站 iZ(t:a%D