javascript - css:框的切 Angular

Question

所以我在 css 中创建了一个像这样的框:

#box
{
background-color: #5d5d5d;
border-radius: 2px 2px 2px 2px;
box-shadow: 5px 5px 2px #767676;
height: 200px;
width: 1100px;
}

结果是

在不覆盖较小的白框且不弄乱阴影效果的情况下，我想做的是这样的:

这有可能吗，还是我只需要在顶部添加一个较小的白框并使用分层和阴影效果，直到它们差不多正确为止？

或者也许有一种方法可以使用 JavaScript 或类似的东西？

注意:我不想做的只是在 photoshop 中创建框，因为这会减慢页面的整体加载时间

Answer 1

选项:1框影

body{padding:40px}

#box
{
background-color: white;
border-radius: 2px 2px 2px 2px;
box-shadow: 14px -88px 0px white,5px 5px 2px #767676,inset 199px -88px 0 #5d5d5d;
height: 200px;
width: 510px;
}

<div id=box />

option:2伪元素见@Fahad Hasan