CSS box-shadow
属性用于应用 一个或多个元素的阴影。
在最简单的使用中,您只需指定水平和垂直阴影。阴影的默认颜色是当前文本颜色。
指定水平和垂直阴影:
div
{
box-shadow: 10px 10px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>
color
参数定义阴影的颜色。
指定阴影的颜色:
div
{
box-shadow: 10px 10px lightblue;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a lightblue box-shadow</div>
</body>
</html>
blur
参数定义模糊半径。数字越高,阴影越模糊。
为阴影添加模糊效果:
div
{
box-shadow: 10px 10px 5px lightblue;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a 5px blurred, lightblue box-shadow.</div>
</body>
</html>
spread
参数定义传播半径。正值会增加阴影的大小,负值会减小阴影的大小。
设置阴影的扩散半径:
div
{
box-shadow: 10px 10px 5px 12px lightblue;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px.</div>
</body>
</html>
inset
参数将阴影从外部阴影(开始)更改为内部阴影。
添加插入参数:
div
{
box-shadow: 10px 10px 5px lightblue inset;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a blurred, lightblue, inset box-shadow.</div>
</body>
</html>
一个元素也可以有多个阴影:
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
margin: 20px;
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
<div id="example1">
<h2>Multiple shadows</h2>
<p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>
<div id="example2">
<h2>Multiple shadows with blur effect</h2>
<p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>
</body>
</html>
您还可以使用 box-shadow
属性来创建类似纸质的卡片:
January 1, 2021
Hardanger, Norway
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>
<h1>Create Cards</h1>
<p>The box-shadow property can be used to create paper-like cards:</p>
<div class="card">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2021</p>
</div>
</div>
</body>
</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>Create Polaroid Images</h1>
<p>The box-shadow property can be used to create polaroid images:</p>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Hardanger, Norway</p>
</div>
</div>
</body>
</html>
下表列出了 CSS 阴影属性:
向元素添加一个或多个阴影
向文本添加一个或多个阴影