1.box-shadow: 10px 20px 10px 10px blue;
参数对应顺序:上下,左右 ,模糊程度,颜色 ,阴影大小
2.box-shadow: 10px 20px 10px 20px blue,-10px -20px 10px 50px red;
负号就是相反方向
支持多个阴影 在后面加逗号
3.box-shadow: 10px 20px 10px blue inset;
正常是外阴影,加上inset设置成内阴影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background: yellow;/* box-shadow: 10px 20px 10px blue; *//* 顺序:上下,左右 ,模糊程度,颜色 ,阴影大小 */box-shadow: 10px 20px 10px 20px blue,-10px -20px 10px 50px red;/* box-shadow: 10px 20px 10px blue inset; *//* 负号就是相反方向支持多个阴影 在后面加逗号正常是外阴影,加上inset设置成内阴影*/}</style>
</head>
<body><div></div>
</body>
</html>