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

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- 给出内部阴影影子法？如果是的话，怎么样？否则，是否有任何方法可以使用 css 提供内部阴影？

Answer 1

习惯了

box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;

inset像这样

.part-two{
                float: left;
                height:300px;
                width: 200px;
                background-color:green;
                box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
            }

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

Answer 2

试试这个：

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

Answer 3

使用这个 box-shadow: 10px 10px 0px 0px 红色插图；

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

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

Answer 4

你在找这样的东西吗？

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

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

Answer 5

是的，可以将 inner-shadow 添加到元素，您只需在 box-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>

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

is it possible to give the shadow inside the container?

html

css

shadow

box-shadow