การทำเงา
การทำเงาด้วย box shadow สามารถทำได้ดังนี้
<html>
<head>
<style>
.div1 {
width:200px;
height:100px;
box-shadow: 10px 10px 5px #888888;
margin-bottom: 30px;
}
.div2 {
width:300px;
height:100px;
box-shadow: 0px 0px 20px #FFFF00;
}
</style>
</head>
<body>
<div class="div1">กล่อง 1</div>
<div class="div2">กล่อง 2</div>
</body>
</html>
จะสามารถได้ผลลัพธ์ดังนี้
ลองปรับตัวเลข หรือสีต่างๆ เพื่อทดสอบการแตกต่าง และเลือกใช้ตามความต้องการได้นะครับ
| จำนวนคนดู : 2,692 | วันที่สร้าง : 15/04/2021 |
