CSS ตัวแปรขอบที่ย่อ

CSS Border - คุณยึดทางบริเวณ

เหมือนที่คุณเห็นในบทที่แล้ว ตอนที่จะจัดการเข็มขัด คุณต้องใส่ใจในคุณสมบัติมากมาย

เพื่อลดรหัสโค้ด คุณยังสามารถกำหนดคุณสมบัติเข็มขัดเดี่ยวด้วยในคุณสมบัติเดียว

border คุณสมบัตินี้เป็นรูปภาพย่อของคุณสมบัติเข็มขัดของข้างต้น

  • border-width
  • border-style（จำเป็น）
  • border-color

ตัวอย่าง

p {
  border: 5px solid red;
}

ผลลัพธ์：

ข้อความบางอย่าง

ทดลองด้วยตัวเอง

คุณยังสามารถกำหนดคุณสมบัติเข็มขัดของเส้นขอบเพียงด้านเดียวด้วย

เข็มขัดด้านซ้าย

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

ผลลัพธ์：

ข้อความบางอย่าง

ทดลองด้วยตัวเอง

เข็มขัดด้านล่าง

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

ผลลัพธ์：

ข้อความบางอย่าง

ทดลองด้วยตัวเอง