ການນຳໃຊ້ CSS

ປະເພດborderCSS

CSS border ປະເພດborderສາມາດອະນຸຍາດໃຫ້ມີການກໍານົດຮູບແບບ, ວົງຂວາງ, ແລະ ສີກາບບອກຂອງປະກອບອຸປະກອນ.

ກາບບອກຂອງຂ້ອຍທັງໝົດມີກາບບອກ.

ຂ້ອຍມີກາບບອກທີ່ສີສີຂຽວ.

ຂ້ອຍມີກາບບອກທີ່ມີທີ່ສຽງ.

ຂ້ອຍມີກາບບອກທີ່ສີຂຽວ.

ປະເພດກາບບອກCSS

border-style ປະເພດສະແດງຂອງກາບບອກທີ່ຈະສະແດງ.

ອະນຸຍາດມີຄູ່ມູນທີ່ຫຼາກຫຼາຍ:

  • dotted - ການອະທິບາຍກາບບອກdotted.
  • dashed - ການອະທິບາຍກາບບອກdashed.
  • solid - ການອະທິບາຍກາບບອກsolid.
  • double - ການອະທິບາຍກາບບອກdouble.
  • groove - ການອະທິບາຍກາບບອກ3D groove. ຜົນກະທົບຈະຖືກກຳນວຍດ້ວຍຄວາມຜົນງານຂອງ border-color.
  • ridge - ການອະທິບາຍກາບບອກ3D ridge. ຜົນກະທົບຈະຖືກກຳນວຍດ້ວຍຄວາມຜົນງານຂອງ border-color.
  • inset - ການອະທິບາຍກາບບອກ3D inset. ຜົນກະທົບຈະຖືກກຳນວຍດ້ວຍຄວາມຜົນງານຂອງ border-color.
  • outset - ການອະທິບາຍກາບບອກ3D outset. ຜົນກະທົບຈະຖືກກຳນວຍດ້ວຍຄວາມຜົນງານຂອງ border-color.
  • none - ການອະທິບາຍກາບບອກທີ່ບໍ່ມີ:
  • hidden - ການອະທິບາຍກາບບອກທີ່ຫຼົງ:

border-style ປະເພດສາມລະຫວ່າງສີ່ລະຫວ່າງຂອງການສະແດງ (ສຳລັບກາບຂ້າງສູງ, ກາບຂ້າງທີ່ສາຍ, ກາບຂ້າງລຸ່ມ, ແລະ ກາບຂ້າງທີ່ສາຍ).

ຄວາມຄົງຈຳນວນ

ສະແດງການມີຮູບແບບຂ້າງບອກທີ່ຫຼາກຫຼາຍ:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

结果：

点状边框。

虚线边框。

实线边框。

双线边框。

凹槽边框。其效果取决于 border-color 的值。

垄状边框。其效果取决于 border-color 的值。

3D inset 边框。其效果取决于 border-color 的值。

3D outset 边框。其效果取决于 border-color 的值。

无边框。

隐藏边框。

混合边框。

亲自试一试

注意：除非设置了 border-style 属性，否则其他 CSS 边框属性（将在下一章中详细讲解）都不会有任何作用！