Question

如何获得一个好的阴影（在小DIV的边界右侧），它等于大div的阴影，但当它到达小div /边界的边界底部时切割顶部的大div。注意：我不能使用Z-index，我的网站方式更复杂。另外，Spread不能在这里使用，因为当它到达border-bottom / border-top时它不会被切断，它不再看起来像3d了。
html：

 <!DOCTYPE html>
<html>
   <head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="small"></div>
<div id="large"></div>
</body>
</html>

在这里，CSS：

#small {
border: 1px solid black;
width: 200px;
height: 50px;
}
#large {
width: 300px;
border: 1px solid black;
height: 100px;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

我还有一个JS Bin：http://jsbin.com/vijujaweja/edit

- 我知道，问题格式有点不好，但我希望你能理解我的问题.-

Answer 1

你想要这样吗？ http://jsbin.com/xohomaraqe/1/edit我更新了一些代码。

<强>更新

这应该适用

#small{
   -webkit-box-shadow: 9px 1px 3px -1px rgba(50, 50, 50, 0.75);
}

Answer 2

为什么不直接为div添加背景颜色？

JS Bin Here

#small {
  border: 1px solid black;
  width: 200px;
  height: 50px;
  background-color:#fff;
}
#large {
  width: 300px;
  border: 1px solid black;
  height: 100px;
  background-color:#fff;
}
.dropshadow {
  -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

如何只获得＆＃39; box-shadow-right＆＃39;当你到达边境时切断了？

2 个答案: