CSS±ß¿òÊôÐÔ
±ß¿ò·ç¸ñÊôÐÔ(border-style)
Õâ¸öÊôÐÔÓÃÀ´É趨ÉÏÏÂ×óÓұ߿òµÄ·ç¸ñ£¬ËüµÄÖµÈçÏ£º
none (ûÓб߿ò£¬ÎÞÂ۱߿ò¿í¶ÈÉèΪ¶à´ó)
dotted (µãÏßʽ±ß¿ò)
dashed (ÆÆÕÛÏßʽ±ß¿ò)
solid (Ö±Ïßʽ±ß¿ò)
double (Ë«Ïßʽ±ß¿ò)
groove (²ÛÏßʽ±ß¿ò)
ridge(¼¹Ïßʽ±ß¿ò)
inset (ÄÚǶЧ¹ûµÄ±ß¿ò)
outset (Í»ÆðЧ¹ûµÄ±ß¿ò)
±ß¿ò¿í¶ÈÊôÐÔ(border-width)
Õâ¸öÊôÐÔÓÃÀ´É趨ÉÏÏÂ×óÓұ߿òµÄ¿í¶È£¬ËüµÄÖµÈçÏ£º
medium (ÊÇȱʡֵ)
thin (±Èmediumϸ)
thick (±Èmedium´Ö)
Óó¤¶Èµ¥Î»¶¨Öµ¡£¿ÉÒÔÓþø¶Ô³¤¶Èµ¥Î»(cm, mm, in, pt, pc)»òÕßÓÃÏà¶Ô³¤¶Èµ¥Î» (em, ex, px)¡£
ÑÝʾʾÀý£º·Ö±ðÓÃmedium, thin, thickºÍ³¤¶Èµ¥Î»¶¨ÖƵÄCSS±ß¿ò¿í¶ÈÊôÐÔʾÀý
±ß¿òÑÕÉ«ÊôÐÔ(border-color)
Õâ¸öÊôÐÔÓÃÀ´É趨ÉÏÏÂ×óÓұ߿òµÄÑÕÉ«¡£Àý¾äÈçÏ£º
.d5 {border-color:gray;border-style:solid;}
ÑÝʾʾÀý
±ß¿òÊôÐÔ(border)
Õâ¸öÊôÐÔÊDZ߿òÊôÐÔµÄÒ»¸ö¿ì½ÝµÄ×ÛºÏд·¨£¬Ëü°üº¬border-width, border-styleºÍborder-color¡£Àý¾äÈçÏ£º
.d1 {border:5px solid gray;}
ÑÝʾʾÀý
µ¥±ß±ß¿òÊôÐÔ
ÉÏÏÂ×óÓÒËĸö±ß¿ò²»µ«¿ÉÒÔͳһÉ趨£¬Ò²¿ÉÒÔ·Ö¿ªÉ趨¡£
É趨Éϱ߿òÊôÐÔ£¬Äã¿ÉÒÔʹÓÃborder-top, border-top-width, border-top-style, border-top-color¡£
É趨ϱ߿òÊôÐÔ£¬Äã¿ÉÒÔʹÓÃborder-bottom, border-bottom-width, border-bottom-style, border-bottom-color¡£
É趨×ó±ß¿òÊôÐÔ£¬Äã¿ÉÒÔʹÓÃborder-left, border-left-width, border-left-style, border-left-color¡£
É趨Éϱ߿òÊôÐÔ£¬Äã¿ÉÒÔʹÓÃborder-right, border-right-width, border-right-style, border-right-color¡£
ÑÝʾʾÀý£ºÉèÖõ¥±ß±ß¿òÊôÐÔµÄʾÀý
Ïà¹ØÎĵµ£º
ÔÚtableÖпØÖƵ¥Ôª¸ñÖ®¼äµÄ¼ä¾àÒªÓõ½cellspacing¡¢cellpadding£¬Ä¬ÈÏÇé¿öcellspacing¡¢cellpadding¾ù²»Îª0£¬µ«¾³£µÄ×´¿öΪÁ˲»ÈÃtableµ¥Ôª¸ñÖ®¼äµÄ¼ä¾àÓ°Ïìµ½ÃÀ¹Û£¬ÎÒÃǾ³£»á°Ñcellspacing¡¢cellpaddingÉèÖÃΪ0£¬Òò´Ë¾³£¿´µ½“<table cellspacing=0 cellpadding=0>”ÕâÑùµÄ´úÂë¡£ÕâÑù×öÎÞÐÎÖÐÔö¼ÓÁË´ú ......
DIV
CSSÉè¼ÆʱIE6¡¢IE7¡¢FF Óë¼æÈÝÐÔÓйصÄÌØÐÔ2008-03-28
14:21ÔÚÍøÕ¾Éè¼ÆµÄʱºò£¬Ó¦¸Ã×¢ÒâcssÑùʽ¼æÈݲ»Í¬ä¯ÀÀÆ÷ÎÊÌ⣬ÌرðÊǶÔÍêȫʹÓÃDIV CSSÉè¼ÆµÄÍø£¬¾ÍÓ¦¸Ã¸ü×¢ÒâIE6 IE7
FF¶ÔCSSÑùʽµÄ¼æÈÝ£¬²»È»£¬ÄãµÄÍøÂÒ¿ÉÄܳöÈ¥²»Ïë³öÏÖµÄЧ¹û£¡
ËùÓÐä¯ÀÀÆ÷ ͨÓà ......
Äã´ó¸ÅÖªµÀ£º¶ÔÓÚÒ»¸öеķÃÎÊÕßÀ´Ëµ£¬ËûÔÚ×î³õ20ÃëÄÚÓëijÍøÕ¾µÄ»¥¶¯Çé¿ö£¬¾ö¶¨ÁËËûÊÇ·ñ»áÁôÔÚÕâ¸öÍøÕ¾×ö½øÒ»²½µÄ̽Ë÷£¬»¹ÊÇÑﳤ¶øÈ¥¡£Õâ¾ÍÒâζ×Å£¬ÔÚÉè¼ÆÍøÒ³µÄʱºò£¬Äã±ØÐë×ñÑÒ»¶¨µÄ¹æÂÉÀ´Áôס·ÃÎÊÕß¡£¼òµ¥µÄ˵£¬¾ÍÊÇ°ÑËùÓеÄÍøÒ³ÔªËØ·ÅÔÚ·ÃÎÊÕßËùÆÚ´ýµÄλÖ᣽øÐдËÉè¼ÆµÄÒ»¸öÖØÒª¶øÓÐЧµÄ²¿·Ö£¬¾ÍÊÇÕûÒ»¸öÒ×ÓÚʹÓÃµÄ ......
ÑùʽӦÓõij¡ºÏµ±È»ÊÇÍøÒ³ÎļþÖУ¬µ«ÊÇÈçºÎÈ¥ÔËÓÃÄØ£¿¿ÉÒÔ¼òµ¥µÄÕûÀíÒ»ÏÂ˼·¡£
selector ÓÐÈýÖÖÇé¿ö£¬ÄÚ²¿Ñùʽ£¬ÍⲿÑùʽ£¬ÄÚÁªÑùʽ¡£Ó﷨Ϊ
Selector { property: value }
¿ÉÒÔͨ¹ýÉèÖñêÇ©µÄstyleÊôÐÔÖÐÊéд£¬Í¨¹ýCLASSºÍIDÀ´¶¨Òå¡£
<link rel=stylesheet href="***/**.css" type="text/css">
ÈýÖÖ·½Ê½µÄÔËÓ ......
CSS´úÂë
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
HTML´úÂë
<div class="test"&g ......