ด้านเส้นขอบ CSS

สารบัญ

    แสดงสารบัญ

เส้นขอบ CSS - แต่ละด้าน

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

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

ตัวอย่าง

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

ผลลัพธ์ :

Different Border Styles

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

ตัวอย่างข้างต้นให้ผลลัพธ์เดียวกันกับนี้:

ตัวอย่าง

p {	border-style: dotted solid;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

นี่คือวิธีการทำงาน:

หากคุณสมบัติ class="w3-codespan">border-style มีสี่ค่า:

  • รูปแบบเส้นขอบ: ลายจุดทึบประคู่;

    • ขอบด้านบนเป็นจุด

    • ขอบด้านขวาแข็ง

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

    • ขอบซ้ายเป็นเส้นประ

หากคุณสมบัติ class="w3-codespan">border-style มีค่าสามค่า:

  • รูปแบบเส้นขอบ: ลายจุดทึบคู่;

    • ขอบด้านบนเป็นจุด

    • เส้นขอบด้านขวาและด้านซ้ายมีความทึบ

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

หากคุณสมบัติ class="w3-codespan">border-style มีสองค่า:

  • รูปแบบเส้นขอบ: ลายจุดทึบ

    • เส้นขอบด้านบนและด้านล่างจะมีจุดประ

    • เส้นขอบด้านขวาและด้านซ้ายมีความทึบ

หากคุณสมบัติ class="w3-codespan">border-style มีค่าเดียว:

  • รูปแบบเส้นขอบ: ลายจุด;

    • เส้นขอบทั้งสี่มีจุดประ

ตัวอย่าง

 /* Four values */
p {
  border-style: dotted solid double dashed; 
}
/* Three 
  values */
p {
  border-style: dotted solid double; 
}
  
/* Two values */
p {
  border-style: dotted solid; 
}
/* One value */
p {
  border-style: dotted; 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>

class="w3-codespan">border-style คุณสมบัติที่ใช้ในตัวอย่างข้างต้น แต่ก็ยังใช้งานได้อีกด้วย class="w3-codespan">ความกว้างของเส้นขอบ และ class="w3-codespan">border-color