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

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is ON
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: background-clip กำหนดขนาดพื้นหลังให้ border

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

by 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 ตัวอย่าง

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>
ผลลัพธ์ที่ได้
Screenshot_2019-08-15 Screenshot(1).png
Screenshot_2019-08-15 Screenshot(1).png (93.6 KiB) Viewed 313 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

Top