有沒有辦法在一個元素上使用兩個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框陰影？

回答

相關問題