box-shadow

属性

inset：阴影在盒子内部绘制，并在内容之上
offset-x
offset-y
blur-radius
spread-radius
color

偏移

偏移是阴影相对于本体的相对位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影右偏移</title> 
<style> 
div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 0px 0px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

模糊距离：`blur-radius`

使用高斯模糊模糊阴影，阴影是元素的复制（阴影会继承元素的border-radius属性）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影右偏移，并模糊了</title> 
<style> 
div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 0px 5px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

阴影大小：`spread-radius`

默认阴影大小等于元素大小，正数阴影变大负数阴影变小

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影完全偏移出来</title> 
<style> 
div
{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow: 0px 100px 0px -10px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Previousbackground-clip Next-webkit-box-reflect

Last updated 5 years ago

Was this helpful?

属性

偏移

模糊距离：blur-radius

阴影大小：spread-radius

模糊距离：`blur-radius`

阴影大小：`spread-radius`