投影下的CSS3空間

我在li項目列表中有以下CSS。投影下的CSS3空間

border: 1px solid black; 
border-radius:10px; 
box-shadow: 8px 8px 4px #666; 
-o-box-shadow: 10px 10px 5px #888; 
-icab-box-shadow: 10px 10px 5px #888; 
-khtml-box-shadow: 10px 10px 5px #888; 
-moz-box-shadow: 10px 10px 5px #888; 
-webkit-box-shadow: 10px 10px 5px #888; 
box-shadow: 10px 10px 5px #888;

我想在元素之間有一些間距，以便使陰影停止與下一個元素重疊。

問題是陰影和圓角必須在李，不能只是被移動到裏面的div，因爲間距然後被放在李本身。

原因是我改變li元素的背景顏色與ajax，如果我將背景顏色應用於li，並且陰影在子元素上，那麼背景顏色將顯示在哪裏這個影子不是在盒子外面，希望這是有道理的。

來源

2012-09-23 Jacob

使用保證金？否則，一個http://jsfiddle.net/會很好 – David

你可以只給一個方塊陰影邊一個負邊距，然後讓另一個稍微長一些來「掃描」你需要的方塊。你跟着？ – noel

您可以使用height和margin屬性（設置一些值是對你有好處）是這樣的：

li { 
    height: 35px; 
    margin:0 15px 15px 0; 
    border: 1px solid black; 
    border-radius:10px; 
    box-shadow: 8px 8px 4px #666; 
    -o-box-shadow: 10px 10px 5px #888; 
    -icab-box-shadow: 10px 10px 5px #888; 
    -khtml-box-shadow: 10px 10px 5px #888; 
    -moz-box-shadow: 10px 10px 5px #888; 
    -webkit-box-shadow: 10px 10px 5px #888; 
    box-shadow: 10px 10px 5px #888; 
}

希望它能幫助。

P.S.哦，如果你想小提琴與它：http://jsfiddle.net/codenighter/FUUwG/。我已經添加了padding屬性以在邊框和文本之間放置一些空白，並且左側的邊距設置爲15px（但您可以忽略或更改它）。

來源

2012-09-24 04:59:41 codenighter

它工作的很好，非常感謝幫助！ – Jacob

投影下的CSS3空間

回答

相關問題