如何在沒有任何漸變的情況下完全圍繞元素創建陰影效果？

以下是我的按鈕代碼。我想用一個盒子陰影來創建按鈕的第二個邊框，而不是將它包裹在某個東西里面。這是爲了給我更多的選擇來改變這種外觀。如何在沒有任何漸變的情況下完全圍繞元素創建陰影效果？

現在我可以使用像box-shadow: 0 0 5px #EEE;或box-shadow: 5px 5px 0 #EEE, -5px -5px 0 #EEE;這樣的東西來創建第二種邊框。

除了第一個有一個梯度，第二個有左下角和右上角的間隙。如何爲我想要的效果創建沒有間隙或沒有漸變？

button { 
    border: 1px solid #CCC; 
    border-bottom: 1px solid #BBB; 
    background: linear-gradient(#FFF, #EEE); 
    box-shadow: 5px 5px 0 #EEE, -5px -5px #EEE; 
    width: 150px; 
    padding: 5px; 
    margin: 5px; 
}

來源

2015-07-19 Alanay

而不是創建幾個抵消箱陰影，你可以只使用一個無偏移和5px的傳播半徑：

button { 
 
    border: 1px solid #CCC; 
 
    border-bottom: 1px solid #BBB; 
 
    background: linear-gradient(#FFF, #EEE); 
 
    box-shadow: 0 0 0 5px #EEE; 
 
    width: 150px; 
 
    padding: 5px; 
 
    margin: 5px; 
 
}

<button>button</button>

更多info on box-shadow

來源

2015-07-19 14:24:21

你可以使用outline而不是box-shadow。這兩個屬性都不佔用空間。

button { 
 
    border: 1px solid #CCC; 
 
    border-bottom: 1px solid #BBB; 
 
    background: linear-gradient(#FFF, #EEE); 
 
    outline: 5px solid #EEE; /*this*/ 
 
    width: 150px; 
 
    padding: 5px; 
 
    margin: 5px; 
 
}

<button>button</button>

來源

2015-07-19 14:26:18 Stickers

如何在沒有任何漸變的情況下完全圍繞元素創建陰影效果？

回答

相關問題