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上，不能只移动到一个div里面，然后将间距放在li本身上。

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

4

1 回答 1

1

您可以像这样使用heightandmargin属性（设置一些对您有利的值）：

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/。我添加了padding在边框和文本之间放置一些空间的属性，左侧的边距设置为 15px（但您可以忽略它或更改它）。

于 2012-09-24T04:59:41.803 回答