CSS Box Shadow
CSS box-shadow Property
คุณสมบัติ CSS box-shadow
ใช้เพื่อนำเงาหนึ่งหรือหลายเงาไปใช้กับองค์ประกอบ
ระบุเงาแนวนอนและแนวตั้ง
ในการใช้งานที่ง่ายที่สุด คุณระบุเฉพาะเงาแนวนอนและแนวตั้งเท่านั้น สีเริ่มต้นของเงาคือสีข้อความปัจจุบัน
<div> องค์ประกอบที่มีกล่องเงา
ตัวอย่าง
ระบุเงาแนวนอนและแนวตั้ง:
div
{
box-shadow: 10px 10px;
}
ระบุสีสำหรับเงา
color
พารามิเตอร์กำหนดสีของเงา
<div> องค์ประกอบที่มีกล่องเงาสีเทา
ตัวอย่าง
ระบุสีสำหรับเงา:
div
{
box-shadow: 10px 10px grey;
}
เพิ่มเอฟเฟกต์เบลอให้กับเงา
พารามิเตอร์กำหนดรัศมี การblur
เบลอ ยิ่งตัวเลขสูง เงาก็จะยิ่งเบลอ
<div> องค์ประกอบที่มี 5px เบลอสีเทากล่องเงา
ตัวอย่าง
เพิ่มเอฟเฟกต์เบลอให้กับเงา:
div
{
box-shadow: 10px 10px 5px grey;
}
กำหนดรัศมีการแพร่กระจายของเงา
spread
พารามิเตอร์กำหนดรัศมีการแพร่กระจาย ค่าบวกจะเพิ่มขนาดของเงา ค่าลบจะลดขนาดของเงา
องค์ประกอบ <div> ที่มีเงากล่องสีเทาเบลอ โดยมีรัศมีการแพร่กระจาย 12px
ตัวอย่าง
กำหนดรัศมีการแพร่กระจายของเงา:
div
{
box-shadow: 10px 10px 5px 12px grey;
}
ตั้งค่าพารามิเตอร์แทรก
พารามิเตอร์ เปลี่ยนinset
เงาจากเงาภายนอก (เริ่มต้น) เป็นเงาภายใน
องค์ประกอบ <div> ที่มีภาพเบลอ สีเทา สิ่งที่ใส่เข้าไปในกล่องเงา
ตัวอย่าง
เพิ่มพารามิเตอร์แทรก:
div
{
box-shadow: 10px 10px 5px grey inset;
}
เพิ่มหลายเงา
องค์ประกอบสามารถมีเงาได้หลายแบบ:
ตัวอย่าง
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
การ์ด
คุณยังสามารถใช้box-shadow
คุณสมบัตินี้เพื่อสร้างการ์ดที่เหมือนกระดาษได้:
1
1 มกราคม 2564
Hardanger, นอร์เวย์
ตัวอย่าง
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |