html - 是否可以在容器内提供阴影？

Question

.part-two{
                float: left;
                height:300px;
                width: 200px;
                background-color:green;
                box-shadow: -10px -10px 1px red;
            }

<div id="part-two" class="part-two">
                </div>

在上面的代码中，我使用 box-shadow 属性给出了一个外部阴影，而不是我想在容器内部给出阴影，是否可以使用 box-shadow 方法给出内部阴影？如果是，如何？ 否则，是否有任何方法可以使用 css 提供内部阴影？

Answer 1

是的，可以将 inner-shadow 添加到元素中，您只需要在 中添加 inset 以及 properties >盒子阴影。

The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.

.part-two{
                float: left;
                height:300px;
                width: 200px;
                background-color:green;
                box-shadow: inset 0px 1px 10px 20px orange;
}

<div id="part-two" class="part-two">
</div>