Page 1 of 1

background-clip กำหนดขนาดพื้นหลังให้ border

Posted: 15/08/2019 6:23 pm
by jamepiyawat
สำหรับการแต่งหน้าเว็บไซต์ให้สวยงามนั้นก็จำเป็นจะต้องใช้ css ในการปรับแต่งต่าง ๆ และหลาย ๆ คนก็คงจะเคยใช้คำสั่ง border กันมาบ้างแล้วแต่ทราบหรือไม่ว่าเราสามารถกำหนดให้พื้นหลังใน border ให้มีขนาดไหนด้วยคำสั่ง background-clip ได้จะกำหนดได้ขนาดไหนลองไปดูกันเลย
โดยเราสามารถกำหนัดพื้นหลังใน border ได้ 3 แบบคือ

background-clip: content-box
เป็นการใส่สีพื้นหลังให้อยู่ตรงกลาง border และจะไม่เต็มพื้นที่ border

background-clip: padding-box
เป็นการใส่พื้นหลังให้พอดีขอบใน border

background-clip: border-box
เป็นการใส่พื้นหลังให้เต็ม border

code ตัวอย่าง

Code: Select all

<!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>
ผลลัพธ์ที่ได้
background-clip กำหนดขนาดพื้นหลังให้ border Screenshot_2019-08-15 Screenshot(1).png
Screenshot_2019-08-15 Screenshot(1).png (93.6 KiB) Viewed 316 times
เป็นอย่างไรกันบ้างสำหรับกาใส่พื้นหลังให้กัน 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