课程表

CSS 高级教程

• ປື້ມການສຳຫຼວດ CSS
• ການນຳເອົາ CSS
• ການຂຽນສາຍສານພື້ນຖານ CSS
• ການຂຽນສາຍສານອັດຕາລະດັບສູງ CSS
• ການຄົ້ນຄວ້າຄູ່ມືການຄົ້ນຄວ້າຄູ່ມືການຄົ້ນຄວ້າຄູ່ມືການຄົ້ນຄວ້າຄູ່ມື
• ການຄົ້ນຄວ້າຄູ່ມື id CSS
• ການຄົ້ນຄວ້າຄູ່ມືຄູ່ມື CSS
• ການສ້າງ CSS
• CSS ພາບຫຼັງ
• CSS ຂໍ້ຄວາມ
• CSS ປະເພດມີລັກສະນະ
• CSS ລາຍການ

CSS 框模型

• ການນຳເອົາສາຍສານກາງ CSS
• CSS ພາບກາງ
• CSS ບໍລິການ
• CSS ພາບຫຼັງ
• CSS ການລວມພາບຫຼັງ

CSS 定位

• ການນຳເອົາຄວາມຕັ້ງທີ່ CSS
• CSS ການຕັ້ງທີ່ຄວາມສຳພັນ
• CSS ການຕັ້ງທີ່ຄວາມສູງ
• CSS ການລອຍ

CSS 选择器

• CSS ການຄົ້ນຄວ້າບັນດາສັດຕະວັດ
• CSS ການທີ່ຈະປະກອບກັນຄູ່ມື
• ການນຳເອົາຄູ່ມືຄູ່ມື CSS
• ການນຳເອົາ ID CSS
• ການນຳເອົາຄູ່ມືຜົນງານ CSS
• CSS ການຄົ້ນຄວ້າຜູ້ຫຼິ້ນຫຼັງ
• CSS ການຄົ້ນຄວ້າຜູ້ຫຼິ້ນລູກ
• CSS ການຄົ້ນຄວ້າຜູ້ຫຼິ້ນຄົນເປັນຜູ້ຫຼິ້ນຫຼັງ

选修课

课程推荐：

• ສະຫຼັກສິ່ງຂອງ CodeW3C.com

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS ບໍລິການ

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。

边框与背景

CSS ກ່າວວ່າບໍ່ມີບາງສັ້ນຈະຂຶ້ນຫຼັງສັ້ນຂອງຫຼັກຕົວ. ນີ້ມີຄວາມສໍາຄັນ, ຍ້ອນວ່າບາງບໍ່ມີບາງສັ້ນຈະມີການສະແດງທີ່ສັ້ນ (ຕົວຢ່າງ: ບໍ່ມີບາງສັ້ນຂອງສັ້ນບໍ່ມີບາງສັ້ນ), ແລະຫຼັກຕົວຄວບຄຸມການສະແດງຄືກັບບໍ່ມີບາງສັ້ນຂອງບໍ່ມີບາງສັ້ນ

CSS2 ໄດ້ກ່າວວ່າສະແດງຫຼັງສັ້ນຈະຂຶ້ນຫາບໍ່ມີບາງສັ້ນ, ແຕ່ວ່າ CSS2.1 ໄດ້ເຮັດການແກ້ໄຂ: ສະແດງຫຼັງສັ້ນຂອງຫຼັກຕົວແມ່ນຂອງເນື້ອ, ບໍ່ມີບາງສັ້ນ, ແລະ ບໍ່ມີບາງສັ້ນ. ສ່ວນຫຼາຍຂອງບັນຊີສະແດງຫຼັງສັ້ນຈະຕິດຕາມ CSS2.1, ແຕ່ບັນຊີສະແດງຫຼັງສັ້ນບັນຊີບັນດາບັນຊີເກົ່າຈະມີການສະແດງທີ່ຕ່າງກັນ

ຮູບແບບບໍ່ມີບາງສັ້ນ

ຮູບແບບແມ່ນສະຖານະທີ່ສຳຄັນຂອງບໍ່ມີບາງສັ້ນ, ບໍ່ແມ່ນຍ້ອນວ່າຮູບແບບຄວບຄຸມການສະແດງບໍ່ມີບາງສັ້ນ (ບໍ່ມີບາງສັ້ນວ່າຮູບແບບຄວບຄຸມການສະແດງບໍ່ມີບາງສັ້ນ), ແຕ່ຍ້ອນວ່າຖ້າບໍ່ມີຮູບແບບ, ຈະບໍ່ມີບໍ່ມີບາງສັ້ນ

CSS ຜົນງານ border-styleການອະທິບາຍ 10 ກວ່າຮູບແບບທີ່ບໍ່ມີການອະນຸຍາດລວມທັງ none

ຕົວຢ່າງ, ເຈົ້າສາມາດອະທິບາຍບໍ່ມີບາງສັ້ນຂອງບັນຊີລູກພາບຫຼັງສັ້ນບໍ່ມີບາງສັ້ນບໍ່ມີບາງສັ້ນບໍ່ມີບາງສັ້ນ, ເຮັດໃຫ້ບັນຊີລູກພາບເບິ່ງຄືກັບ “ກະບັບປະກອບກະສູນ”

a:link img {border-style: outset;}

ການອະທິບາຍຮູບແບບຫຼາຍກວ່າຫນຶ່ງ

ເຈົ້າສາມາດອະທິບາຍຮູບແບບຫຼາຍກວ່າຫນຶ່ງສັນ, ຕົວຢ່າງ:

p.aside {border-style: solid dotted dashed double;}

ກົດລະບຽບດັ່ງກ່າວນີ້ໄດ້ອະທິບາຍຮູບແບບບໍ່ມີບາງຂອງບັນຊີລູກຫຼັງສັ້ນຈຸດນັ້ນຫຼາຍຄູ່ມື: ບາງຮູບແບບກະບາຍສູງ, ບາງຮູບແບບກະບາຍດາວ, ບາງຮູບແບບກະບາຍທີ່ບໍ່ມີບາງສັ້ນ, ແລະ ບາງຮູບແບບກະບາຍທີ່ມີສັ້ນສອງສັ້ນ

ພວກເຮົາໄດ້ເຫັນວ່າຄູ່ມືຂອງພວກເຮົາໃຊ້ຕາມລຳດັບ top-right-bottom-left ກໍ່ມີລຳດັບນັ້ນກໍ່ໄດ້ໃນການກ່າວກັບການປ່ຽນຂັ້ນຕອນຈາກຫຼາຍຄູ່ມື

ການອະທິບາຍຮູບແບບຂາຍກະແຈ

ຖ້າເຈົ້າຕ້ອງການປ່ຽນຮູບແບບບໍ່ມີບາງຂ້າງຂອງບັນຊີລູກປະກອບຫຼັງສັ້ນບໍ່ມີບາງສັ້ນບໍ່ມີບາງສັ້ນບໍ່ມີບາງສັ້ນ

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

因此这两种方法是等价的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

ຄວາມຫຼາຍຄວາມຂອງຊັບແປວ

ທ່ານສາມາດ: ການກໍານົດ border-widthການກໍານົດຄວາມຫຼາຍຄວາມຂອງຊັບແປວ

ມີສອງວິທີທີ່ທ່ານສາມາດກະຈາຍຄວາມຫຼາຍຄວາມຂອງຊັບແປວຢ່າງນັ້ນ: ທ່ານສາມາດກະຈາຍຄວາມຫຼາຍຄວາມທີ່ສະເພາະບາງຄວາມກວມຂອງຊັບແປວສະເພາະບາງຄວາມກວມຂອງຊັບແປວ ອີກຢ່າງໜຶ່ງແມ່ນຄວາມກວມທີ່ສະເພາະບາງຄວາມກວມຂອງຊັບແປວ ອີກຢ່າງໜຶ່ງແມ່ນຄວາມກວມທີ່ສະເພາະບາງຄວາມກວມຂອງຊັບແປວ:

ຄໍາເຫັນ:CSS ບໍ່ໄດ້ກໍານົດຄວາມຫຼາຍຄວາມທີ່ສະເພາະສຳລັບສາຍຄວາມຂອງຊັບແປວສາມຄັ້ງຫຼືຫາຍຄັ້ງ ດັ່ງນັ້ນຜູ້ນຳໃຊ້ສາມາດກະຈາຍ thin 、medium (ຄຳຖາມ) ແລະ thick ຄືກັບ 5px、3px ແລະ 2px ຂຶ້ນ ແລະຜູ້ນຳໃຊ້ອື່ນອີກອາດກະຈາຍ 3px、2px ແລະ 1px ຂຶ້ນ:

ດັ່ງນັ້ນ ທ່ານສາມາດກະຈາຍຄວາມກວມຂອງຊັບແປວຢ່າງນີ້:

p {border-style: solid; border-width: 5px;}

ຫຼື:

p {border-style: solid; border-width: thick;}

ການກໍານົດຄວາມຫຼາຍຄວາມຂອງຊັບຊ້ອຍ

ທ່ານສາມາດກະຈາຍຄວາມກວມຂອງຊັບແປວຢ່າງທີ່ຈະມີອັນດັບຂອງຂໍ້ບອກຊາກແບບ top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

ຄັນຄືນກ່ອນໜ້ານີ້ຍັງສາມາດຂຽນວ່າ (ການຂຽນນີ້ຖືກເອີ້ນວ່າ):ຄູ່ມູນຄືກັນ）：

p {border-style: solid; border-width: 15px 5px;}

ທ່ານຍັງສາມາດກະຈາຍຄວາມຫຼາຍຄວາມກວມຂອງຊັບແປວຂອງຂໍ້ບອກຊາກຢ່າງພິເສດສະເພາະບາງຂອງຊັບແປວ:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

ດັ່ງນັ້ນ ກົດລະບຽບທີ່ຖືກກໍານົດຢູ່ລັງກັບການຕົວຢ່າງທີ່ກ່າວກ່ອນແມ່ນມີຄວາມມີຕົນຕົງ:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

ບໍ່ມີຊັບແປວ

ໃນຄັນຄືນກ່ອນໜ້ານີ້，ທ່ານໄດ້ເຫັນແລ້ວວ່າ ຖ້າຕ້ອງການສະແດງບາງຊັບແປວຂອງຂໍ້ບອກຊາກຂອງບາງຊັບແປວແບບ solid ຫຼື outset。

ຖ້າຈະກະທັນ border-style ຕັດອອກຈະມີສະຖານະຫຍັງ:

p {border-style: none; border-width: 50px;}

尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？

这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

ສິ່ງນີ້ຫຼາຍກວ່າຫນັງມີຄວາມສໍາຄັນ. ຄວາມຈິງ, ການລືມການຖະແຫຼງຊັບສັບບາດຫນັງຈະເປັນຄວາມຜິດພາດທີ່ຫຼາຍທີ່ສຸດ. ຕາມກົດລະບຽບນີ້, ບັນດາ h1 ຈະບໍ່ມີບາດ, ບໍ່ວ່າມີວົງຂວາງ 20 ຕີ.

h1 {border-width: 20px;}

ຍ້ອນວ່າຊັບສັບ border-style ມີຄູ່ກະພັນ none, ຖ້າບໍ່ຖະແຫຼງຊັບສັບ, ຈະຮັບຄູ່ border-style: none.ຖ້າທ່ານຢາກບາດສະແດງ, ຕ້ອງຖະແຫຼງຊັບສັບບາດ.

ສີບາດ

ການກະທຳຊັບສັບບາດສີຫຼາຍກວ່າຫນັງ. CSS ນຳໃຊ້ຊັບສັບທີ່ລະບົບ: border-color ອະທິບາຍ，ມັນສາມາດເອົາລະຫັດສີຫຼາຍກວ່າ 4 ສິບສາມ.

ສາມາດໃຊ້ລະຫັດສີແບບເປັນທຸກຄົນ, ເຊິ່ງສາມາດແມ່ນຊັບສັບສີມະນຸດ, ຫລື RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

ຖ້າລະຫັດສີມີຫຼາຍກວ່າ 4 ສິບສາມ, ການສົ່ງລະຫັດຈະກະທຳ. ເປັນຕົວຢ່າງ, ກໍລະນີນີ້ປະກາດຊັບສັບບາດຫຍັງສັບສະນະເບື້ອງຫຼັງຂອງສັບສະນະຂອງວົງວຽງແລະວົງວຽງຂອງວົງວຽງຫຍັງຂອງສັບສະນະ:

p {
  border-style: solid;
  border-color: blue red;
  }

ຄໍາເຫັນ:ຊັບສັບບາດສີທີ່ມີຢ່າງສົມບູນແມ່ນສີໜ້າຂອງບັນດາສິ່ງ. ຖ້າບໍ່ມີການຖະແຫຼງຊັບສັບບາດສີບໍ່ຈະສະແດງສີກັບສີຂອງຂໍ້ຄວາມຂອງບັນດາສິ່ງ. ດ້ວຍດັ່ງນັ້ນຖ້າບໍ່ມີຂໍ້ຄວາມບັນດາສິ່ງ, ອາດຈະເປັນຕາສະນະຄອນທີ່ພຽງແຕ່ມີພາບ, ຊັບສັບບາດສີຂອງຕາສະນະຄອນຈະຈະສີຂອງຕາສະນະສັບປົກກະຕິ (ຍ້ອນ color ສາມາດເຂົ້າຊິບໄດ້). ຕາສະນະສັບປົກກະຕິອາດຈະອາດຕາສະນະມົນລະພາບ, div ຫລື ຕາສະນະ table ອື່ນ:

ການສະແດງຊັບສັບດ້ານດຽວ

ຍັງມີຊັບສັບສີບຸດດ້ານດຽວ. ຄວາມຜະລິດຂອງນັ້ນຄືກັບຊັບສັບດ້ານດຽວສັບສະນະຮູບແບບແລະວົງຂວາງ:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

ທີ່ຈະຈຳນວນ h1 ພາສາຫຍັງຂອງບາດຫຍັງມີວົງຂວາງສີດຳແລະວົງຂວາງຊ້າຍມີວົງຂວາງສີສີນົມ ສາມາດຈຳນວນນັ້ນແນວ:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

ບາດສະຕັບສີບຸດ

ພວກເຮົາໄດ້ບອກກ່ອນວ່າຖ້າວ່າບາດຫຍັງບໍ່ມີຊັບສັບແບບບາດຫຍັງບໍ່ມີວົງຂວາງ. ແຕ່ບາງຄັ້ງເຈົ້າອາດຢາກສ້າງວ່າບາດບໍ່ສາມາດເຫັນ.

CSS2 ສະແດງໃຊ້ລະຫັດສີວ່າສະຕັບ. ລະຫັດນີ້ສະແດງໃຫ້ສ້າງວ່າສີບຸດທີ່ບໍ່ສາມາດເຫັນ. ຍັງມີກໍລະນີທີ່ພວກເຮົາພົບພັນ:

AAA
BBB
CCC

我们为上面的链接定义了如下样式：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

亲自试一试

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

CSS 边框属性

ອຸປະກອນອຸປະກອນ

ປືກສາຂອງ CSS

ການຄົ້ນຫາຄູ່ມູນ CSS

ການທົດລອງ CSS

ການສອນ CSS

ທໍານາຍສະໜອງ