Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

是的，可以将inner-shadow添加到元素中，您只需要在inset中添加properties和box-shadow。

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>

Answer 2

使用此方框阴影：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 3

习惯了这个

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 4

你正在寻找这样的东西吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

试试这个：

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

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

5 个答案: