3

liアイテムのリストに次のCSSがあります。

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;

ドロップシャドウが次の要素と重ならないようにするために、要素間にもある程度の間隔を空けたいと思います。

問題は、影と丸みを帯びた角がliにある必要があり、間隔をli自体に配置するために、内側のdivに移動することはできないことです。

これは、li要素の背景色をajaxで変更し、liに背景色を適用し、影が子要素にある場合、影がない場所に背景色が表示されるためです。 、箱の外で、これが理にかなっていることを願っています。

4

1 に答える 1

1

height次のように、 andプロパティを使用でき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;
}

それが役に立てば幸い。

PSああ、それをいじりたいのなら： http : //jsfiddle.net/codenighter/FUUwG/。境界線とテキストの間にスペースを入れるためのプロパティを追加しました。左側の余白は15pxに設定されています（ただし、無視するか、変更することができます）。padding

于 2012-09-24T04:59:41.803 に答える