โดย M034 » 05/04/2016 3:32 pm
กำหนดรูปแบบของกรอบภาพหรือกล่องข้อความ โดยกำหนด
โค้ด: เลือกทั้งหมด
<head>
<meta charset="UTF-8"/>
<style>
div{
width:300px; /*กำหนดความกว้าง*/
height:100px; /*กำหนดความสูง*/
background-color:red; /*กำหนดสีให้พื้นหลัง*/
box-shadow:10px 15px 5px #888888; /*กำหนดเงา โดยใช้คำสั่ง box:shadow 10px เป็นการกำหนดเงาทางด้านขวาของกล่อง15px เป็นการกำหนดเงาด้านล่าง และ 5px เป็นการกำหนดความสว่างของเงา*/
</style>
</head>
<body>
<div>ข้อความในกล่อง</div>
</body>
ผลลัพธ์
- Selection_180.png (19.33 KiB) Viewed 3116 times
ศึกษาจากที่
บทที่ 2 CSS3 Borders ตอนที่ 2 ใส่เงาให้กรอบรูปภาพ พื้นหลังของภาพ style
กำหนดรูปแบบของกรอบภาพหรือกล่องข้อความ โดยกำหนด
[code]<head>
<meta charset="UTF-8"/>
<style>
div{
width:300px; /*กำหนดความกว้าง*/
height:100px; /*กำหนดความสูง*/
background-color:red; /*กำหนดสีให้พื้นหลัง*/
box-shadow:10px 15px 5px #888888; /*กำหนดเงา โดยใช้คำสั่ง box:shadow 10px เป็นการกำหนดเงาทางด้านขวาของกล่อง15px เป็นการกำหนดเงาด้านล่าง และ 5px เป็นการกำหนดความสว่างของเงา*/
</style>
</head>
<body>
<div>ข้อความในกล่อง</div>
</body>
[/code]
ผลลัพธ์
[attachment=0]Selection_180.png[/attachment]
ศึกษาจากที่ [url=https://www.youtube.com/watch?v=pVjIsNH-PBQ&list=PLLi1ciqQAf8TPD9upqrC1pFtEeTJ-cUWo&index=2]บทที่ 2 CSS3 Borders ตอนที่ 2 ใส่เงาให้กรอบรูปภาพ พื้นหลังของภาพ style[/url]
[youtube]https://youtu.be/pVjIsNH-PBQ[/youtube]