CSS box-shadow Property
ตัวอย่าง
เพิ่มเงาให้กับองค์ประกอบ <div> ที่แตกต่างกัน:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow:
5px 10px #888888;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติbox-shadowแนบเงาหนึ่งหรือหลายองค์ประกอบ
| ค่าเริ่มต้น: | ไม่มี |
|---|---|
| รับการถ่ายทอด: | ไม่ |
| เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS3 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.boxShadow="10px 20px 30px สีน้ำเงิน" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit- หรือ -moz- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
| Property | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
ไวยากรณ์ CSS
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
หมายเหตุ:หากต้องการแนบเงามากกว่าหนึ่งรายการกับองค์ประกอบ ให้เพิ่มรายการเงาที่คั่นด้วยเครื่องหมายจุลภาค (ดูตัวอย่าง "ลองใช้เอง" ด้านล่าง)
มูลค่าทรัพย์สิน
| Value | Description | Play it |
|---|---|---|
| none | Default value. No shadow is displayed | |
| h-offset | Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box | |
| v-offset | Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box | |
| blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be | |
| spread | Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow | |
| color | Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
|
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
เคล็ดลับ: อ่านเพิ่มเติมเกี่ยวกับค่าที่อนุญาต (หน่วยความยาว CSS)
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เพิ่มเอฟเฟกต์เบลอให้กับเงา:
#example1 {
box-shadow: 10px 10px 8px #888888;
}
ตัวอย่าง
กำหนดรัศมีการแพร่กระจายของเงา:
#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}
ตัวอย่าง
กำหนดหลายเงา:
#example1 {
box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}
ตัวอย่าง
เพิ่มคำสำคัญแทรก:
#example1 {
box-shadow: 5px 10px inset;
}
ตัวอย่าง
ภาพที่โยนลงบนโต๊ะ ตัวอย่างนี้สาธิตวิธีการสร้างภาพ "โพลารอยด์" และหมุนภาพ:
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid
#BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Box Shadow
การอ้างอิง HTML DOM: คุณสมบัติ boxShadow