1.給一個div加陰影最常見的寫法是
div
{
box-shadow: 10px 10px 5px #888888;
}
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
2.給一個div三個方向加陰影(分別給各個邊加陰影)
div
{
box-shadow: 0 0 0 #888888, // 上,無陰影
5px 5px 5px #888888, //右
0 5px 5px #888888, // 下
-5px 5px 5px #888888 //左
}
測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三邊陰影</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: pink;
box-shadow: 0 0 0 gray,
5px 5px 5px gray,
0 5px 5px gray,
-5px 5px 5px gray;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
效果圖：
3.給一個div加內陰影
div
{
box-shadow: 0 0 10px #888888 inset;
}
測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塌陷</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: pink;
box-shadow: 0 0 15px black inset;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
效果圖：
