如何在没有任何渐变的情况下完全围绕元素创建阴影效果？

以下是我的按钮代码。我想用一个盒子阴影来创建按钮的第二个边框，而不是将它包裹在某个东西里面。这是为了给我更多的选择来改变这种外观。如何在没有任何渐变的情况下完全围绕元素创建阴影效果？

现在我可以使用像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

如何在没有任何渐变的情况下完全围绕元素创建阴影效果？

回答

相关问题