使用css到多个方面的框阴影

Question

我试图通过这样做来展示我的容器div的阴影。

div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}

但这显示了右下角的影子。我想控制阴影。任何人都可以指导我如何只向一侧显示阴影i-e右/左或上/下。工作Jsfiddle将帮助我理解这一点。提前致谢

Answer 1

你可以创建如下：

div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: inset 10px 0px 5px 0px rgba(0,0,0,0.81);
}

上方将显示左侧阴影。
也适用于右侧阴影：

box-shadow: inset -10px 0px 5px 0px rgba(0,0,0,0.81);

点击此处Fiddle。

您可以使用影子生成器：Link

Answer 2

请尝试此demo

我希望我可能对你有所帮助

.box
{
margin:0;
padding:0;
float:left;
width:200px;
height:100px;
background:#ccc;
margin-left:20px;
-webkit-box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
-moz-box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
 box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
 }