CSS Box Shadow 详解
css3基础 2022-05-23 12:07:26小码哥的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
