阴影在一个元素的一侧？
我需要在某个block元素上创建一个盒子阴影，但仅限于其右侧（例如）。 我这样做的方式是将带有box-shadow的内部元素box-shadow到具有padding-right和overflow:hidden;的外部元素box-shadow overflow:hidden; 所以影子的另外三面不可见。
有没有更好的方法来实现这一目标？ 像box-shadow-right ？
编辑 ：我的意图是只创建阴影的垂直部分。 与规则background:url(shadow.png) 100% 0% repeat-y repeat-y完全相同background:url(shadow.png) 100% 0% repeat-y会这样做。
是的，您可以使用box-shadow规则的shadow spread属性：
.myDiv
{
border: 1px solid #333;
width: 100px;
height: 100px;
-webkit-box-shadow: 10px 0 5px -2px #888;
box-shadow: 10px 0 5px -2px #888;
}<div class="myDiv"></div>我自制的解决方案很容易编辑：
HTML：
<div id="anti-shadow-div">
<div id="shadow-div"></div>
</div>
CSS：
#shadow-div{
margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
margin-left:0px; /* Set to 20px if you want shadow at the left side */
margin-top:0px; /* Set to 20px if you want shadow at the top side */
margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
box-shadow: 0px 0px 20px black;
height:100px;
width:100px;
background: red;
}
#anti-shadow-div{
margin:20px;
display:table;
overflow:hidden;
}
演示：
http://jsfiddle.net/jDyQt/103
要在两侧获得剪切效果，可以使用具有背景渐变的伪元素。
header::before, main::before, footer::before, header::after, main::after, footer::after {
display: block;
content: '';
position: absolute;
width: 8px;
height: 100%;
top: 0px;
}
header::before, main::before, footer::before {
left: -8px;
background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
header::after, main::after, footer::after {
right: -8px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
会为通常构成文档的元素的左侧和右侧添加一个很好的阴影效果。
链接地址: http://www.djcxy.com/p/89039.html