ການປ່ຽນສະເພາະ CSS

ບາງຄັອບຄັມນີ້ມີບາງຄັອບຄັມສີດຳແລະກະຈາຍບາງຄັອບຄັມສີຟ້າ, ວົງກວ້າງ 10px.

ການປ່ຽນສະເພາະ CSS

ກະຈາຍຢູ່ທາງຫຼັງບາງຄັອບຄັມແລະຢູ່ທາງຫຼັງບາງຄັອບຄັມ, ເພື່ອກະຈາຍບາງຄັອບຄັມ.

CSS ມີປະສົງກະຈາຍບາງຄັອບຄັມທີ່ກໍານົດການກະຈາຍບາງຄັອບຄັມ:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

注意：ກະຈາຍບາງຄັອບຄັມborderຕະຫຼາດ!ຕະຫຼາດນີ້ຢູ່ວ່າ: ກະຈາຍການກະຈາຍຢູ່ທາງຫຼັງບາງຄັອບຄັມແລະອາດຈະຫຼາຍກັບເນື້ອທີ່ອື່ນ. ບໍ່ດຽວນີ້ກະຈາຍບາງຄັອບຄັມບໍ່ແມ່ນສ່ວນຂອງຂະໜາດຂອງບາງຄັອບຄັມ; ຂະໜາດທັງໝົດຂອງບາງຄັອບຄັມບໍ່ຖືກກວດກາຈາກຄວາມເປັນບາງຄັອບຄັມ.

CSS ຮູບແບບກະຈາຍບາງຄັອບຄັມ

ປະສົງ outline-style ກຳນົດຮູບແບບກະຈາຍບາງຄັອບຄັມແລະສາມາດກຳນົດຄັນດັ່ງກ່າວ:

  • dotted - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ມີສາຍທີ່ບໍ່ບົງ.
  • dashed - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ມີສາຍທີ່ບໍ່ບົງ.
  • solid - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ມີສາຍທີ່ບົງ.
  • double - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ມີສາຍສອງສາຍ.
  • groove - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ລົງສູງສັກສາດ3Dທີ່ມີຮອບໜ້າ.
  • ridge - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ສູງສັກສາດ3Dທີ່ມີຮອບຫຼັງ.
  • inset - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ລົງສູງສັກສາດ3D.
  • outset - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ສູງສັກສາດ3D.
  • none - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ບໍ່ມີບາງຄັອບຄັມ.
  • hidden - ການກໍານົດການກະຈາຍບາງຄັອບຄັມທີ່ບໍ່ສະແດງ.

ບັນທຶກລາຍການທີ່ສະແດງການຈັດການ outline-style ທີ່ຫຼາກຫຼາຍ:

ຄວາມຈິງ

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

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

结果：

点状轮廓。

虚线轮廓。

实线轮廓。

双线轮廓。

3D 凹槽轮廓。此效果取决于 outline-color 值。

3D 凸槽轮廓。此效果取决于 outline-color 值。

3D 凹边轮廓。此效果取决于 outline-color 值。

3D 凸边轮廓。此效果取决于 outline-color 值。

亲自试一试

注意：除非设置了 outline-style 属性，否则其他轮廓属性（在下一章中将详细介绍）都不会有任何作用！