CSS Box Shadow 详解
css3基础 2022-05-23 12:07:2613小码哥的IT人生shichen
CSS Box Shadow
CSS box-shadow 属性
CSS box-shadow 属性应用阴影于元素。
最简单的用法是只指定水平阴影和垂直阴影：
带有黑色 box-shadow 的黄色 <div> 元素
示例代码：
div { box-shadow: 10px 10px; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px; } </style> </head> <body> <h1>box-shadow 属性</h1> <div>已设置 box-shadow 的 div 元素</div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
接下来，为阴影添加颜色：
带有灰色 box-shadow 的黄色 <div> 元素
示例代码：
div { box-shadow: 10px 10px grey; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px grey; } </style> </head> <body> <div>已设置 box-shadow 的 div 元素</div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
接下来，向阴影添加模糊效果：
黄色的 <div> 元素，带有模糊的 box-shadow
示例代码：
div { box-shadow: 10px 10px 5px grey; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px 5px grey; } </style> </head> <body> <div>已设置 box-shadow 的 div 元素</div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
卡片
您还可以使用 box-shadow 属性创建纸质卡片效果：
1
January 1, 2021
Coffee
实例
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; }
完整实例【亲自试一试：纸卡片】：
<!DOCTYPE html> <html> <head> <style> 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; } div.header { background-color: #4CAF50; color: white; padding: 10px; font-size: 40px; } div.container { padding: 10px; } </style> </head> <body> <h2>Cards</h2> <p>box-shadow 属性可用于创建类似纸质的卡片：</p> <div class="card"> <div class="header"> <h1>1</h1> </div> <div class="container"> <p>January 1, 2021</p> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【亲自试一试：图像卡片】：
<!DOCTYPE html> <html> <head> <style> div.polaroid { 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; } div.container { padding: 10px; } </style> </head> <body> <h1>宝丽来图像 / 卡片</h1> <p>box-shadow 属性可用于创建类似纸质的卡片：</p> <div class="polaroid"> <img src="/i/photo/coffee.jpg" alt="Shanghai" style="width:100%"> <div class="container"> <p>Shanghai, China</p> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
