投影外的CSS3空间
投影外的CSS3空间
提问于 2012-09-24 05:44:38
我在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元素应用了背景色，并且阴影在子元素上，那么背景色将显示在阴影不在的位置，在框外，希望这是有意义的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-24 12:59:42
您可以使用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 (但您可以忽略它或更改它)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12556532
复制相关文章
相似问题
腾讯云开发者
