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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jamepiyawat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 859
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

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

โพสต์โดย jamepiyawat » 15/08/2019 6:23 pm

สำหรับการแต่งหน้าเว็บไซต์ให้สวยงามนั้นก็จำเป็นจะต้องใช้ css ในการปรับแต่งต่าง ๆ และหลาย ๆ คนก็คงจะเคยใช้คำสั่ง border กันมาบ้างแล้วแต่ทราบหรือไม่ว่าเราสามารถกำหนดให้พื้นหลังใน border ให้มีขนาดไหนด้วยคำสั่ง background-clip ได้จะกำหนดได้ขนาดไหนลองไปดูกันเลย
โดยเราสามารถกำหนัดพื้นหลังใน 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>


ผลลัพธ์ที่ได้

Screenshot_2019-08-15 Screenshot(1).png
Screenshot_2019-08-15 Screenshot(1).png (93.6 KiB) เปิดดู 81 ครั้ง


เป็นอย่างไรกันบ้างสำหรับกาใส่พื้นหลังให้กัน 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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 7 และ บุคคลทั่วไป 0 ท่าน