前言

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

語法如下：

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

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

實現(xiàn)四周陰影

方法一：

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

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

效果

方法二：

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

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

效果

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

最新評論