我想知道css3对侧边特定内部阴影的支持。
我知道这在支持的浏览器上工作得很好。
div { box-shadow:inset 0px 1px 5px black; }
我只是好奇是否有一种方法可以实现这样的事情:
div { box-shadow-top:inset 0px 1px 5px black; }
发布于 2012-08-24 20:18:21
发布于 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>
发布于 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>
https://stackoverflow.com/questions/5917412
复制相似问题