<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box,
.a {
box-shadow: 0px 0px 0 20px red, 0px 0px 0 38px grey, 0px 0px 0 51px blue, 0px 0px 0 84px yellow;
width: 200px;
height: 200px;
margin: 0;
padding: 0;
border: 1px solid #ccc;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999999999999999999;
color: #aaa;
border-radius: 0px 0px 0px 125px
}
.box1 {
box-shadow: 0px 0px 0 20px red, 0px 0px 0 38px grey, 0px 0px 0 51px blue, 0px 0px 0 84px yellow;
width: 200px;
height: 200px;
margin: 0;
padding: 0;
border: 1px solid #ccc;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999999999999999999;
color: #aaa;
border-radius: 100px 100px 0px 0px;
}
.box2 , .b{
box-shadow: 0px 0px 0 20px red, 0px 0px 0 38px grey, 0px 0px 0 51px blue, 0px 0px 0 84px yellow;
width: 200px;
height: 200px;
margin: 0;
padding: 0;
border: 1px solid #ccc;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999999999999999999;
color: #aaa;
border-radius: 100px 100px 100px 0px;
}
.a {
left: 20%;
}
.b {
left: 80%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
語法
/* x偏移量 | y偏移量 | 陰影顏色 /
box-shadow: 60px -16px teal;/ x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: inset 5em 1em gold;
/* 任意數量的陰影，以逗號分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局關鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
指定單個 box-shadow 的用法：
給出兩個、三個或四個數字值的情況。
如果只給出兩個值, 這兩個值將被瀏覽器解釋爲x軸上的偏移量 和y軸上的偏移量 。
如果給出了第三個值, 這第三個值將被解釋爲模糊半徑的大小 。
如果給出了第四個值, 這第四個值將被解釋爲擴展半徑的大小 。
可選， 插頁(陰影向內) inset。
可選， 顏色值 。
聲明多個shadows時， 用逗號將shadows隔開
inset
如果沒有指定inset，默認陰影在邊框外，即陰影向外擴散。
這是頭兩個 值，用來設置陰影偏移量。x,y 是按照數學二維座標系來計算的，只不過y垂直方向向下。 設置水平偏移量，正值陰影則位於元素右邊，負值陰影則位於元素左邊。 設置垂直偏移量，正值陰影則位於元素下方，負值陰影則位於元素上方。
可以畫出你想要圖案的陰影。