CSS Border(±ß¿ò)
CSS ±ß¿ò
CSS ±ß¿ò (border) ¿ÉÒÔÊÇÎ§ÈÆÔªËØÄÚÈݺÍÄڱ߾àµÄÒ»Ìõ»ò¶àÌõÏߣ¬¶ÔÓÚÕâЩÏßÌõ£¬Äú¿ÉÒÔ×Ô¶¨ÒåËüÃǵÄÑùʽ¡¢¿í¶ÈÒÔ¼°ÑÕÉ«¡£Ê¹ÓÃCSS±ß¿òÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔ´´½¨³ö±ÈHTMLÖиü¼ÓÓÅÐãµÄЧ¹û¡£
CSS ±ß¿òÊôÐÔ
CSS±ß¿òÊôÐÔÔÊÐíÄãÖ¸¶¨Ò»¸öÔªËØ±ß¿òµÄÑùʽºÍÑÕÉ«¡£
±ß¿òÑùʽ
±ß¿òÑùʽÊôÐÔÖ¸¶¨ÒªÏÔʾʲôÑùµÄ±ß½ç¡£
Remark border-styleÊôÐÔÓÃÀ´¶¨Òå±ß¿òµÄÑùʽ
border-style Öµ:
none: ĬÈÏÎޱ߿ò
dotted: ¶¨ÒåÒ»¸öµãÏß¿ò
dashed: ¶¨ÒåÒ»¸öÐéÏß¿ò
solid: ¶¨ÒåʵÏ߽߱ç
double: ¶¨ÒåÁ½¸ö±ß½ç¡£ Á½¸ö±ß½çµÄ¿í¶ÈºÍborder-widthµÄÖµÏàͬ
groove: ¶¨Òå3D¹µ²Û±ß½ç¡£Ð§¹ûÈ¡¾öÓڱ߽çµÄÑÕɫֵ
ridge: ¶¨Òå3D¼¹±ß½ç¡£Ð§¹ûÈ¡¾öÓڱ߽çµÄÑÕɫֵ
inset:¶¨ÒåÒ»¸ö3DµÄǶÈë±ß¿ò¡£Ð§¹ûÈ¡¾öÓڱ߽çµÄÑÕɫֵ
outset: ¶¨ÒåÒ»¸ö3DÍ»³ö±ß¿ò¡£ Ч¹ûÈ¡¾öÓڱ߽çµÄÑÕɫֵ
±ß¿ò¿í¶È
Äú¿ÉÒÔͨ¹ý border-width ÊôÐÔΪ±ß¿òÖ¸¶¨¿í¶È¡£
Ϊ±ß¿òÖ¸¶¨¿í¶ÈÓÐÁ½ÖÖ·½·¨£º¿ÉÒÔÖ¸¶¨³¤¶ÈÖµ£¬±ÈÈç 2px »ò 0.1em£»»òÕßʹÓà 3 ¸ö¹Ø¼ü×ÖÖ®Ò»£¬ËüÃÇ·Ö±ðÊÇ thin ¡¢medium£¨Ä¬ÈÏÖµ£© ºÍ thick¡£
×¢Ò⣺CSS ûÓж¨Òå 3 ¸ö¹Ø¼ü×ֵľßÌå¿í¶È£¬ËùÒÔÒ»¸öÓû§´úÀí¿ÉÄÜ°Ñ thin ¡¢medium ºÍ thick ·Ö±ðÉèÖÃΪµÈÓÚ 5px¡¢3px ºÍ 2px£¬¶øÁíÒ»¸öÓû§´úÀíÔò·Ö±ðÉèÖÃΪ 3px¡¢2px ºÍ 1px¡£
ʵÀý
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
±ß¿òÑÕÉ«
border-colorÊôÐÔÓÃÓÚÉèÖñ߿òµÄÑÕÉ«£¬ËüÒ»´Î¿ÉÒÔ½ÓÊÜ×î¶à 4 ¸öÑÕɫֵ¡£¿ÉÒÔÉèÖõÄÑÕÉ«£º
name - Ö¸¶¨ÑÕÉ«µÄÃû³Æ£¬Èç "red"
RGB - Ö¸¶¨ RGB Öµ, Èç "rgb(255,0,0)"
Hex - Ö¸¶¨16½øÖÆÖµ, Èç "#ff0000"
Äú»¹¿ÉÒÔÉèÖñ߿òµÄÑÕɫΪ"transparent"¡£
×¢Ò⣺ border-colorµ¥¶ÀʹÓÃÊDz»Æð×÷Óõ쬱ØÐëµÃÏÈʹÓÃborder-styleÀ´ÉèÖñ߿òÑùʽ¡£
ʵÀý
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
±ß¿ò-µ¥¶ÀÉèÖø÷±ß
ÔÚCSSÖУ¬¿ÉÒÔÖ¸¶¨²»Í¬µÄ²àÃæ²»Í¬µÄ±ß¿ò£º
ʵÀý
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
ÉÏÃæµÄÀý×ÓÒ²¿ÉÒÔÉèÖÃÒ»¸öµ¥Ò»ÊôÐÔ£º
ʵÀý
border-style:dotted solid;
³¢ÊÔһϠ»
border-styleÊôÐÔ¿ÉÒÔÓÐ1-4¸öÖµ£º
border-style:dotted solid double dashed;
Éϱ߿òÊÇ dotted
Óұ߿òÊÇ solid
µ×±ß¿òÊÇ double
×ó±ß¿òÊÇ dashed
border-style:dotted solid double;
Éϱ߿òÊÇ dotted
×ó¡¢Óұ߿òÊÇ solid
µ×±ß¿òÊÇ double
border-style:dotted solid;
ÉÏ¡¢µ×±ß¿òÊÇ dotted
×ó¡¢Óұ߿òÊÇ solid
border-style:dotted;
ËÄÃæ±ß¿òÊÇ dotted
ÉÏÃæµÄÀý×ÓÓÃÁËborder-style¡£È»¶ø£¬ËüÒ²¿ÉÒÔºÍborder-width ¡¢ border-colorÒ»ÆðʹÓá£
͸Ã÷±ß¿ò
CSS2 ÒýÈëÁ˱߿òÑÕɫֵ transparent£¬Õâ¸öÖµÓÃÓÚ´´½¨Óпí¶ÈµÄ²»¿É¼û±ß¿ò¡£
͸Ã÷ÑùʽµÄ¶¨ÒåÈçÏ£º
a:link, a:visited { border-style: solid; border-width: 5px; border-color: transparent; } a:hover {border-color: gray;}
ÀûÓà transparent£¬Ê¹Óñ߿ò¾ÍÏñÊǶîÍâµÄÄڱ߾àÒ»Ñù£»´ËÍ⻹ÓÐÒ»¸öºÃ´¦£¬¾ÍÊÇÄÜÔÚÄãÐèÒªµÄʱºòʹÆä¿É¼û¡£ÕâÖÖ͸Ã÷±ß¿òÏ൱ÓÚÄڱ߾࣬ÒòÎªÔªËØµÄ±³¾°»áÑÓÉìµ½±ß¿òÇøÓò£¨Èç¹ûÓпɼû±³¾°µÄ»°£©¡£
±ß¿ò-¼òдÊôÐÔ
ÉÏÃæµÄÀý×ÓÓÃÁ˺ܶàÊôÐÔÀ´ÉèÖñ߿ò¡£
ÄãÒ²¿ÉÒÔÔÚÒ»¸öÊôÐÔÖÐÉèÖñ߿ò¡£
Äã¿ÉÒÔÔÚ"border"ÊôÐÔÖÐÉèÖãº
border-width
border-style (required)
border-color
ʵÀý
border:5px solid red;
×÷Õߣº´óѧÉúÐÂÎÅÍø À´Ô´£º´óѧÉúÐÂÎÅÍø
·¢²¼Ê±¼ä£º2025-03-28 ÔĶÁ£º
- CSS ÂÖÀª£¨outline£©ÊôÐÔ
- ÂÖÀª£¨outline£©ÊÇ»æÖÆÓÚÔªËØÖÜΧµÄÒ»ÌõÏߣ¬Î»Óڱ߿ò±ßÔµµÄÍâΧ£¬¿ÉÆðµ½Í»³öÔªËØµÄ×÷Óá£
- 03-28 ¹Ø×¢£º0
- CSS Border(±ß¿ò)
- CSS ±ß¿ò (border) ¿ÉÒÔÊÇÎ§ÈÆÔªËØÄÚÈݺÍÄڱ߾àµÄÒ»Ìõ»ò¶àÌõÏߣ¬¶ÔÓÚÕâЩÏßÌõ£¬Äú¿ÉÒÔ×Ô¶¨ÒåËüÃǵÄÑùʽ¡¢¿í¶ÈÒÔ¼°ÑÕÉ«¡£
- 03-28 ¹Ø×¢£º1
- CSS ºÐ×ÓÄ£ÐÍ
- ËùÓÐHTMLÔªËØ¿ÉÒÔ¿´×÷ºÐ×Ó£¬ÔÚCSSÖУ¬"box model"ÕâÒ»ÊõÓïÊÇÓÃÀ´Éè¼ÆºÍ²¼¾ÖʱʹÓá£
- 03-28 ¹Ø×¢£º1
- CSS Table(±í¸ñ)
- ´¹Ö±¶ÔÆëÊôÐÔÉèÖô¹Ö±¶ÔÆë£¬±ÈÈç¶¥²¿£¬µ×²¿»òÖм䣺
- 03-28 ¹Ø×¢£º1
- CSS ÁбíÑùʽ(ul)
- ÔÚµ¥¸öÊôÐÔÖпÉÒÔÖ¸¶¨ËùÓеÄÁбíÊôÐÔ¡£Õâ¾ÍÊÇËùνµÄËõдÊôÐÔ¡£
- 03-28 ¹Ø×¢£º1
- CSS Á´½Ó(link)
- ÌØ±ðµÄÁ´½Ó£¬¿ÉÒÔÓв»Í¬µÄÑùʽ£¬ÕâÈ¡¾öÓÚËûÃÇÊÇʲô״̬¡£
- 03-28 ¹Ø×¢£º1
- CSS Text(Îı¾)
- ͨ¹ýCSSµÄTextÊôÐÔ£¬Äã¿ÉÒԸıäÒ³ÃæÖÐÎı¾µÄÑÕÉ«¡¢×Ö·û¼ä¾à¡¢¶ÔÆëÎı¾¡¢×°ÊÎÎı¾¡¢¶ÔÎı¾½øÐÐËõ½øµÈµÈ£¬Äã¿ÉÒÔ¹Û²ìÏÂÊöµÄÒ»¶Î¼òµ¥µÄÓ¦
- 03-27 ¹Ø×¢£º2