前言

首先確定的是需要使用box-shadow這一屬性

語法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow：表示水平方向上的陰影偏移量，必須指明，可以是正數、負數、0，如果為正數左方有陰影，如果為負數右方有陰影，如果為0它位于元素的正中間。
• v-shadow：表示垂直方向上的陰影偏移量，必須指明，可以是正數、負數、0，如果是正數則下方有陰影，如果是負數則上方有陰影，如果是0，則在元素正中間。
• blur：表示陰影的模糊程度，可選項，可以是正數、負數。數值越大，陰影越模糊，反之陰影越清晰，如果值為0時表示完全清晰。
• spread：表示陰影的擴張程度，可選項，可以是正數、負數。當擴張程度為正數時陰影擴張，而為負數時陰影收縮，如果值為0，則表示不改變陰影的擴張程度。
• color：表示陰影的顏色，可以采用各種CSS支持的顏色格式進行設置，例如：RGB值，16進制值等等。
• inset：表示是否要將陰影設置為內陰影，可以省略，如果指定了這個值則表示要將陰影設置為內陰影，否則為外陰影。

實現(xiàn)四周陰影

方法一：

需要分別設置四周陰影，代碼如下：

div {
   width: 300px;
   height: 300px;
   box-shadow:
     5px 5px 5px #00000014,
     5px -5px 5px #00000014,
     -5px 5px 5px #00000014,
     -5px -5px 5px #00000014;
}

效果

方法二：

四周效果一致，只需控制第三個參數，注意前兩個參數不能全為0

div {
   width: 300px;
   height: 300px;
   box-shadow: 0 2px 12px 0 pink;
}

效果

到此這篇關于css實現(xiàn)元素四周陰影的示例代碼的文章就介紹到這了,更多相關css元素四周陰影內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論