การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ


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

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

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ

Post by bankjittapol » 15/11/2019 5:56 pm

การใช้ box-shadow เพื่อสร้างเงาให้ tag html
การใช้ css เพิ่ม ให้แก่ tag html ซึ่งการใช้ box-show เพื่อ กำหนดเงา ให้แก่ tag html เพื่อให้ tag นั้นมีมิติ แล้วเพิ่ม hover selector ซึ่งการทำงานของ hover คือ เมื่อนำเมาส์ไปวางไว้บน tag html ที่เราใส่คำสั่ง css ไปก็แล้วแต่ องค์ประกอบ css ตัวอย่างที่กำหนดให้ มีดังนี้

border: 1px solid; กำหนดความหนาของเส้นกรอบ
padding: 10px; กำหนดช่องว่างให้พื้นที่ ถ้ากำหนด ดังตัวอย่าง จะเท่ากับ (10px,10px,10px,10px)
box-shadow: 5px 10px 8px #888888; กำหนดเงา ตำแหน่งที่เงาแสดงผล และสีของเงา
:hover จะทำงานเมื่อ นำเมาส์ไปวางบน tag html

ตัวอย่าง
คำสั่ง css

Code: Select all

#test1 {
  border: 1px solid;
  padding: 10px;

}
#test1:hover {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 8px #888888;
}

Code: Select all

<div id="test1">
  <p>Set box-shadow on hover </p>
</div>

Image


เมื่อนำเมาส์ไปวางบน tag p
Image

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 2 guests