我想知道在css3中支持侧面特定的内部阴影.
我知道这在支持的浏览器上运行良好.
div { box-shadow:inset 0px 1px 5px black; }
我只是想知道是否有办法实现以下目标:
div { box-shadow-top:inset 0px 1px 5px black; }
小智 143
这对我有用:
box-shadow: inset 1px 4px 9px -6px;
sel*_*ler 11
我不认为你真的需要,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>
使用:before和父after元素上的常规阴影剪切的元素,overflow:hidden如下例所示:http://dabblet.com/gist/2585782
/**
* 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*/
<div id="element"></div>
在大多数情况下,您可以使用背景渐变进行解决:
SCSS(带指南针)示例:
@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );