添加內嵌框陰影選項，而不覆蓋現有屬性

我在我的樣式表應用於.foo一個box-shadow屬性：添加內嵌框陰影選項，而不覆蓋現有屬性

.foo { 
    box-shadow: 0 0 10px 0 #000000 inset, 0 0 2px 0 #3C3C3C inset; 
}

現在我想另一種選擇在線與不同的動態添加幾個div的無需重寫現有box-shadow屬性生成的值：

<div class="foo" style="box-shadow: 0 -5px 0 0 red inset"> 
</div> 
<div class="foo" style="box-shadow: 0 -5px 0 0 blue inset"> 
</div> 
<div class="foo" style="box-shadow: 0 -5px 0 0 green inset"> 
</div>

結果的第一個div應該是這樣的：

box-shadow: 0 -5px 0 0 red inset, 
    0 0 10px 0 #000000 inset, 
    0 0 2px 0 #3C3C3C inset

我該怎麼做？非常感謝。

來源

2013-05-01 user1783674

取前值，添加一個新的給它，追加回boxshadow財產 – 2013-08-20 03:00:17

與您內嵌風格新規則將簡單覆蓋舊規則。我能想到的僅有CSS的唯一方法是使用絕對定位的pseudo element，儘管這也依賴於您的.foo相對定位。

CSS

.foo:after { 
    position: absolute; 
    content: ''; 
    top: 0; right: 0; bottom: 0; left: 0; 
    box-shadow: 0 0 10px 0 #000000 inset, 0 0 2px 0 #3C3C3C inset 
} 

.foo { 
    position:relative; 
    width:100px; /* added for demo */ 
    height:100px; /* added for demo */ 
}

jsFiddle demo

來源

2013-05-01 09:41:25 andyb

很好地工作，謝謝。我錯了只想在CSS中做到這一點？還是應該像gaynorvader建議的那樣使用jQuery？ – user1783674 2013-05-01 09:49:32

完全取決於您的要求。一個跨瀏覽器的CSS解決方案_jould可以有更多的CSS作爲（更高版本的）jQuery可以處理不同的瀏覽器供應商前綴（例如'-webkit-'，-moz-'）。當然，也取決於你是否已經擁有jQuery。我肯定不會爲了這個功能而導入jQuery。就我個人而言，我喜歡原生CSS解決方案，因爲它們應該始終更快呈現。 – andyb 2013-05-01 09:59:50

像這樣的事情在jQuery的應該工作：

var currentBoxShadow = $('.foo').css("box-shadow"); 
$('.foo').css("box-shadow", "0 -5px 0 0 #FFF, " + currentBoxShadow); 
currentBoxShadow = $('.bar').css("box-shadow"); 
$('.bar').css("box-shadow", "0 -5px 0 0 #FFF, " + currentBoxShadow);

如果你希望他們所有的同一類，在第n個孩子選擇可以幫助：

var currentBoxShadow = $('.foo:nth-child(2)').css("box-shadow"); 
$('.foo:nth-child(2)').css("box-shadow", "0 -5px 0 0 #F00, " + currentBoxShadow);

來源

2013-05-01 09:20:53 gaynorvader

我應該提到，我想這適用於幾個div的，每個都有不同的值。這不會工作，是嗎？ – user1783674 2013-05-01 09:24:59

如果你對這些div有不同的選擇器，我會更新我的答案來顯示第二個div。 – gaynorvader 2013-05-01 09:26:10

添加內嵌框陰影選項，而不覆蓋現有屬性

回答

相關問題