CSS Borders - คุณสมบัติชวเลข

สารบัญ

CSS Border - คุณสมบัติชวเลข

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

หากต้องการย่อโค้ดให้สั้นลง ยังสามารถระบุคุณสมบัติเส้นขอบแต่ละรายการได้อีกด้วย หนึ่งทรัพย์สิน

class="w3-codespan">border คุณสมบัติเป็นคุณสมบัติชวเลขสำหรับคุณสมบัติเส้นขอบแต่ละรายการต่อไปนี้:

class="w3-codespan">border-width
class="w3-codespan">border-style (required)
class="w3-codespan">border-color

ตัวอย่าง

p {	border: 5px solid red;
}

ผลลัพธ์ :

Some text

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>
</html>

คุณยังสามารถระบุคุณสมบัติเส้นขอบทั้งหมดสำหรับด้านเดียวได้:

ขอบซ้าย

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

ผลลัพธ์ :

Some text

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>

</body>
</html>

ขอบล่าง

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

ผลลัพธ์ :

Some text

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-bottom Property</h2>
<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p>

</body>
</html>