โดยเราสามารถกำหนัดพื้นหลังใน border ได้ 3 แบบคือ
background-clip: content-box
เป็นการใส่สีพื้นหลังให้อยู่ตรงกลาง border และจะไม่เต็มพื้นที่ border
background-clip: padding-box
เป็นการใส่พื้นหลังให้พอดีขอบใน border
background-clip: border-box
เป็นการใส่พื้นหลังให้เต็ม border
code ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px dotted black;
padding: 15px;
background: lightgreen;
background-clip: border-box;
}
#example2 {
border: 10px dotted black;
padding: 15px;
background: lightgreen;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 15px;
background: lightgreen;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>กำหนดสีพื้นด้วย background-clip</h1>
<br>
<div id="example1">
<p>background-clip: border-box เป็นการใส่พื้นหลังให้เต็ม border </p>
</div>
<br>
<div id="example2">
<p>background-clip: padding-box เป็นการใส่พื้นหลังให้พอดีขอบใน border</p>
</div>
<br>
<div id="example3">
<p>background-clip: content-box เป็นการใส่สีพื้นหลังให้อยู่ตรงกลาง border และจะไม่เต็มพื้นที่ border</p>
</div>
</body>
</html>
เป็นอย่างไรกันบ้างสำหรับกาใส่พื้นหลังให้กัน border เป็นความรู้ใหม่บ้างหรือเปล่าทางผู้เขียนบทความก็หวังเป็นอย่างยิ่งว่าผู้ที่สนใจในบทความนี้แล้วเข้ามาอ่านจะได้รับความรู้ความสามารถกันเพิ่มขึ้นไม่มากก็น้อย
แหล่งที่มา
https://www.w3schools.com/cssref/css3_p ... d-clip.asp
https://developer.mozilla.org/en-US/doc ... round-clip
ศึกษาเพิ่มเติม
https://www.mindphp.com/vdo-tutorial-css3.html