![]()
<style>
#div {
margin: 50px;
width: 100px;
height: 100px;
background: red;
/*box-shadow: 0px 0px 20px 0px #ff0000; /*四周陰影*/
}
/*
陰影
/*box-shadow:[inset] x y blur [spread] color
inset投影方式:內投影;不給：外投影；
x、y:陰影偏移;(第一二爲參數、可爲0)
blur:模糊半徑;(第三位參數）
spread:擴展陰影半徑、先擴展原有形狀，再開始畫陰影(第4爲參數);
color:顏色(第五位參數)
box-shadow: x y blur spread color;[inset可不加] 左右、上下 陰影大小 顏色
/*box-shadow: 0px 0px 20px 0px #ff0000; /*四周陰影*/
box-shadow: 0px -10px 10px 0px #ff0000, /*上邊陰影 紅色*/
-10px 0px 10px 0px #3bee17, /*左邊陰影 綠色*/
10px 0px 10px 0px #2279ee, /*右邊陰影 藍色*/
0px 10px 10px 0px #eede15; /*下邊陰影 黃色*/
</style>
<body>
<div id="div"></div>
</body>
