我在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,并且阴影位于子元素上,则背景颜色将显示在阴影不是,在盒子外面,希望这是有道理的。
答案 0 :(得分: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(但您可以忽略它或更改它)。