我在 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,并且阴影在子元素上,那么背景颜色将显示在阴影不在框外,希望这是有道理的。
最佳答案
您可以像这样使用 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(但您可以忽略它或更改它)。
关于CSS3 空间外阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12556532/