有没有办法在一个元素上使用两个CSS3框阴影？

116

我想复制一个Photoshop模型中有两个阴影的按钮样式。第一个阴影是内部较亮的阴影框（2px），第二个阴影是按钮外部的投影（5px）本身。有没有办法在一个元素上使用两个CSS3框阴影？

在Photoshop中，这是很容易 - 内阴影和阴影。在CSS中，我可以显然有一个或另一个，但不能同时。

如果您在浏览器中尝试下面的代码，您会看到盒子阴影会覆盖插入框阴影。

这里的插图框阴影：

box-shadow: inset 0 2px 0px #dcffa6;

这是我想什么按钮上的阴影：

box-shadow: 0 2px 5px #000;

为背景，这里是我的全部按键代码（与梯度和所有）：

button { 
    outline: none; 
    position: relative; 
    width: 160px; 
    height: 40px; 
    font-family: 'Open Sans', sans-serif; 
    color: #fff; 
    font-weight: 800; 
    font-size: 12px; 
    text-shadow: 0px 1px 3px black; 
    border-radius: 3px; 
    background-color: #669900; 
    background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900)); 
    background: -moz-linear-gradient(top, #97cb52, #669900); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#97cb52', endColorstr='#669900'); 
    box-shadow: inset 0 2px 0px #dcffa6; 
    box-shadow: 0 2px 5px #000; 
    border: 1px solid #222; 
    cursor: pointer; 
}

来源

2011-12-19 Benjamin Humphrey

289

您可以用逗号分开的阴影：

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

来源

2011-12-19 02:46:26

图例，谢谢！这很好，很容易。 – 2011-12-19 02:47:34

不客气;很高兴有帮助！ =） – 2011-12-19 02:50:32

还提到第一个宣布的影子是对以下的一个（S）http://jsfiddle.net/webtiki/s9pkj/ – 2014-07-14 14:20:46

箱阴影可以使用commas有多ple效果，就像背景图片一样（在CSS3中）。

来源

2011-12-19 02:45:00 JayC

虽然你可以申请多个阴影，将*插图*阴影，我发现，是一种特殊情况。（但是，那种情况只适用于图像，我猜）。 – JayC 2011-12-19 03:00:39

真的吗？我现在在移动，所以我无法检查;但我之前没有听说过这个消息......我会在明天下班后看看。 =/ – 2011-12-19 03:04:59

如果你想要在图像上插入阴影，你必须在上面设置一个元素或伪元素。这可能会很棘手。 – JayC 2011-12-19 03:21:10

有没有办法在一个元素上使用两个CSS3框阴影？

回答

相关问题