可以在容器内部添加阴影吗？

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添加内部阴影的方法？

- ADH - THE TECHIE GUY

---

可以使用 inset 属性实现这一效果：https://css-tricks.com/snippets/css/css-box-shadow/ - Jonas Grumann

Answer 1

是的，可以向元素添加内阴影，只需要在box-shadow中使用inset和其他属性即可。

inset关键字的存在将阴影更改为框架内部的阴影（就像内容被压缩在框内）。插入阴影在边框内绘制（即使是透明的），在背景上方但在内容下方。

.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>

- frnt

Answer 2

使用这个 box-shadow: 10px 10px 0px 0px red inset; 来添加阴影效果。

.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>

- Dsenese1

Answer 3

你是在寻找像这样的东西吗？

.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>

- JeetDaloneboy

Answer 4

习以为常

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>

- Rohit Azad Malik

Answer 5

试试这个：

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

- Alireza Behnamnik