CSS ขอบ

คุณสมบัติของเข็มมุน CSS

CSS 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 คุณสมบัติสามารถตั้งค่าค่าจาก 1 ถึง 4 ของ (ใช้สำหรับเข็มมุมบน, เข็มมุมขวา, เข็มมุนล่าง และเข็มมุนซ้าย)。

ตัวอย่าง

แสดงรูปแบบของเข็มมุมต่าง ๆ :

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;}

ผลลัพธ์:

ขอบเขตที่เป็นจุด

ขอบเขตที่เป็นสายตาย

ขอบเขตที่เป็นสายตรง

ขอบเขตที่เป็นสายสองราย

ขอบเขตที่เป็นที่หลุม

ขอบเขตที่เป็นแบบลูกโม้ง

ขอบเขต 3D inset ซึ่งผลของมันขึ้นอยู่กับค่า border-color

ขอบเขต 3D outset ซึ่งผลของมันขึ้นอยู่กับค่า border-color

ขอบเขตที่ไม่มี

ขอบเขตที่ซ่อน

ขอบเขตที่ผสมทั้งหมด

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

แนะนำ:เว้นแต่ที่ได้ตั้งค่า border-style ตัวแปร border-style ไม่มีผล หากยังไม่ได้ตั้งค่าอื่นๆ ของ CSS ของขอบเขต (จะมีการอธิบายละเอียดในบทถัดไป)!