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;

我想在元素之间留出一些间距，以使阴影停止与下一个元素重叠。

问题是阴影和圆角必须在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;
}

希望它有所帮助。

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

CSS3空间外投影

1 个答案: