CSS3方框阴影:插图只能做单面还是双面？就像边框顶端？
CSS3方框阴影:插图只能做单面还是双面？就像边框顶端？
提问于 2011-05-07 05:55:26
我想知道css3对侧边特定内部阴影的支持。
我知道这在支持的浏览器上工作得很好。
div { box-shadow:inset 0px 1px 5px black; }我只是好奇是否有一种方法可以实现这样的事情：
div { box-shadow-top:inset 0px 1px 5px black; }回答 10
Stack Overflow用户
回答已采纳
发布于 2012-08-24 20:18:21
Stack Overflow用户
发布于 2011-05-07 06:13:43
我不认为你真的需要box-shadow-top，因为如果你将offsetx设置为0，offsety设置为任何正值，只有剩余的阴影在顶部。
如果你想在顶部有阴影，在底部有阴影，你可以简单地使用两个div：
<div style="box-shadow:inset 0 1px 5px black;">
<div style="box-shadow:inset 0 -1px 5px black;">
some content
</div>
</div>如果你想去除侧面的阴影，使用rgba而不是hex颜色并设置更大的offsety：
box-shadow:inset 0 5px 5px rgba(0,0,0,.5) 通过这种方式，你可以给阴影更多的不透明度，因此边保持隐藏，并且偏移越多，你得到的不透明度越小
完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
background: #1C1C1C;
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: #fff;
-webkit-border-radius: 20px;
-khtml-border-radiust: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow:inset 0px 5px 5px rgba(0,0,0,.5);
}
div > div {
background:none;
box-shadow:inset 0px -5px 5px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div><div></div></div>
</body>
</html>Stack Overflow用户
发布于 2012-05-03 22:00:52
在父框上使用由overflow:hidden剪切的具有规则阴影的:before和after元素，如下例所示：http://dabblet.com/gist/2585782
CSS
/**
* Top and Bottom inset shadow
*/
#element{
background-color: #E3F2F7;
height: 55px;
position: relative; /* to position pseudo absolute*/
overflow: hidden; /* to cut of overflow shadow*/
margin-top: 200px;
}
#element:before , #element:after{
content: "\0020";
display: block;
position: absolute;
width: 100%;
height: 1px; /* when 0 no shadow is displayed*/
box-shadow: #696c5c 0 0 8px 0;
}
#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px} /* because of height: 1*/HTML
<div id="element"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5917412
复制相关文章
相似问题
腾讯云开发者
