CSS ขอบทุกข้าง

CSS ของเขตตรงข้าง - ของเขตตรงข้างเดี่ยว

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

ใน CSS มีคุณสมบัติบางตัวที่สามารถใช้เพื่อกำหนดเขตตรงข้างทุกฝั่ง (ด้านบน, ด้านขวา, ด้านล่าง และ ด้านซ้าย):

ตัวอย่าง

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

ผลลัพธ์:

รูปแบบของเขตตรงข้างที่ต่างกัน

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

รูปแบบของเขตตรงข้างที่ต่างกัน

ผลลัพธ์ของตัวอย่างที่แล้วเหมือนกัน:

ตัวอย่าง

p {
  border-style: dotted solid;
}

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

หลักการทำงานของมันคือนั่น:

หาก border-style การตั้งค่าค่าของเครื่องมือสี่ค่า:

border-style: dotted solid double dashed;

  • เขตตรงข้างบนคือเส้นแบบลาย
  • เขตตรงข้างขวาคือเส้นแบบแข็ง
  • เขตตรงข้างล่างคือเส้นแบบสองสาย
  • เขตตรงข้างซ้ายคือเส้นแบบลาย

หาก border-style การตั้งค่าค่าของเครื่องมือสามค่า:

border-style: dotted solid double;

  • เขตตรงข้างบนคือเส้นแบบลาย
  • ขอบขวางและขอบซ้ายเป็นสีเส้นเลื่อย
  • เขตตรงข้างล่างคือเส้นแบบสองสาย

หาก border-style การตั้งค่าคุณสมบัติสองค่า

border-style: dotted solid;

  • ขอบขนานและขอบต้นเป็นสีเส้นลาย
  • ขอบขวางและขอบซ้ายเป็นสีเส้นเลื่อย

หาก border-style การตั้งค่าคุณสมบัติเพียงค่าหนึ่ง

border-style: dotted;

  • ขอบทั้งสี่ด้านเป็นเส้นลาย

ตัวอย่าง

/* ค่าสี่ */
p {
  border-style: dotted solid double dashed; 
}
/* ค่าสาม */
p {
  border-style: dotted solid double; 
}
/* ค่าสอง */
p {
  border-style: dotted solid; 
}
/* ค่าหนึ่ง */
p {
  border-style: dotted; 
}

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

ในตัวอย่างที่ใช้คือ border-style คุณสมบัติ border-width และ border-color นั้นก็เช่นเดียว