CSS3 空间外阴影

Question

我在 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;

我也希望元素之间有一些间距，以使投影停止与下一个元素重叠。

问题是阴影和圆 Angular 必须在 li 上，不能只移动到 div 里面，因为间距要放在 li 本身上。

这样做的原因是，我用 ajax 更改了 li 元素的背景颜色，如果我将背景颜色应用到 li，并且阴影在子元素上，那么背景颜色将显示在阴影不在框外，希望这是有道理的。

Answer 1

您可以像这样使用 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;
}

希望对您有所帮助。

附言哦，如果你想摆弄它:http://jsfiddle.net/codenighter/FUUwG/ .我添加了 padding 属性以在边框和文本之间放置一些空间，左侧的边距设置为 15px(但您可以忽略它或更改它)。