html - 使用css到多边的框阴影

Question

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

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

但是这会在右侧和底部显示阴影。我想控制阴影。谁能指导我如何只在一侧显示阴影，即右/左或上/下。使用 Jsfiddle 将帮助我理解这一点。提前致谢

Answer 1

请试试这个 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);
 }