如何创建一个插入框阴影只在一边？

有没有可能只在 div 的一边使用嵌入框阴影？请注意，我在这里讨论的是 插图盒阴影，而不是正常的外部盒阴影。

例如，在下面的 JSFiddle 中，您将看到插入阴影以不同的程度出现在所有4条边上。

我怎样才能让它只显示在顶部？或者最多只在顶部和底部？

JSFiddle: < a href = “ http://JSFiddle.net/ahmadka/KFrun/”rel = “ norefrer”> http://JSFiddle.net/ahmadka/kfrun/

.box {
-webkit-box-shadow: inset 0px 5px 10px 1px #000000;
box-shadow: inset 0px 5px 10px 1px #000000;
}


.text {
padding: 20px;
}
<div class="box">
<div class="text">
Lorem ipsum ....
</div>
</div>

148239 次浏览
小开

诀窍在于内置第二个 .box-inner，它的宽度比原来的 .box要大，而且 box-shadow也适用于此。

然后，添加更多的填充到 .text，以弥补增加的宽度。

逻辑是这样的:

box logic

下面是 CSS 中的操作方法:

使用 .inner-box的最大宽度不要导致 .box变得更宽，使用 overflow确保其余的被剪切:

.box {
max-width: 100% !important;
overflow: hidden;
}

110% 的宽度比在子上下文中为100% 的父级宽度宽(例如，当父级 .box具有固定宽度时应该是相同的)。 负边距弥补了宽度，并使元素居中(而不是只隐藏右边部分) :

.box-inner {
width: 110%;
margin-left:-5%;
margin-right: -5%;
-webkit-box-shadow: inset 0px 5px 10px 1px #000000;
box-shadow: inset 0px 5px 10px 1px #000000;
}

并且在 X 轴上添加一些填充物以弥补更宽的 .inner-box:

.text {
padding: 20px 40px;
}

这是一把能用的小提琴。

如果你检查小提琴，你会看到:

.box .box-inner .text

小开

这有点太接近了。

.box
{
-webkit-box-shadow: inset -1px 10px 5px -3px #000000;
box-shadow: inset -1px 10px 5px -3px #000000;
}
小开

试试吧，也许有用..。

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
-webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
-o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
-moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;

在 CSS之上，因为你有一个在底部的盒子阴影。
你可以在这里看到更多的红色信息

小开

这是你正在寻找的。它有示例的每一面你想与阴影。

.top-box
{
box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

有关更多示例，请参见下面的代码片段:

body {
background-color:#0074D9;
}
div {
background-color:#ffffff;
padding:20px;
margin-top:10px;
}
.top-box {
box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}
<div class="top-box">
This area has a top shadow using box-shadow
</div>


<div class="left-box">
This area has a left shadow using box-shadow
</div>


<div class="right-box">
This area has a right shadow using box-shadow
</div>


<div class="bottom-box">
This area has a bottom shadow using box-shadow
</div>


<div class="top-gradient-box">
This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
This area has a bottom shadow using gradients
</div>

小开

有点晚了，但是这里有一个不需要改变填充或添加额外 div 的重复答案: 有一个问题与框阴影插入底部只。上面说，第四个长度用一个负值来定义传播距离。这一点经常被忽视，但所有主流浏览器都支持

答案来自 小提琴:

box-shadow: inset 0 -10px 10px -10px #000000;
小开

插入框阴影只在顶部？

#box {
background: #CCC;
-webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
font: bold 18px/1.2em sans-serif;
height: auto;
margin: 15px auto;
padding: 75px 15px 25px;
text-align: center;
width: 80%;
}
小开

这可能不是你正在寻找的东西，但你可以创建一个非常类似的效果，使用 rgba与 linear-gradient的组合:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

这创建了一个线性渐变从黑色的50% 不透明度(rgba(0,0,0,.5))到透明度(rgba(0,0,0,0)) ，其中开始透明度从顶部30% 。您可以使用这些值来创建您想要的效果。你可以通过增加一个 deg 值(linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%))或者改变周围的颜色来使它处于不同的位置。如果你想要真正复杂的阴影像不同的角度在不同的方面，你甚至可以开始分层 linear-gradient。

下面是一个片段，可以看到它的实际运作情况:

.box {
background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}


.text {
padding: 20px;
}
<div class="box">
<div class="text">
Lorem ipsum ....
</div>
</div>

小开

字面上你不能做这样的事情，但是你应该尝试这个 CSS 技巧:

box-shadow: inset 0 3vw 6vw rgba(0,0,0,0.6), inset 0 -3vw 6vw rgba(0,0,0,0.6);
小开

设置所有四个一次很容易与正常的方块阴影。设置1很容易使用负扩展，但是你可以利用伪元素像这样轻松地做两边或三边(不需要添加 div) :

.box-example {
box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
height: 80px;
border: 1px dashed grey;
position: relative;
}
.box-example::after {
content: " ";
background-color: transparent;
width: 100%;
height: 100%;
position: absolute;
left: 0;
box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2 {
box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
height: 80px;
border: 1px dashed grey;
position: relative;
margin-top: 8px;
}
.box-example2::before,
.box-example2::after {
content: " ";
background-color: transparent;
width: 100%;
height: 100%;
position: absolute;
left: 0;
box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2::after {
box-shadow: inset -7px 0px 9px -7px rgb(0 0 0 / 40%);
}
<div class="box-example">I have a top and bottom</div>
<div class="box-example2">I have a top, bottom, and right</div>

小开

这似乎是最简单的方法:

box-shadow: inset 0 calc(7px + 42px) 0 -42px black;

当然，您可以省略 calc()部分，改为设置 49px; 这只是为了清晰起见和/或 DRY (例如，通过使用自定义 vars)。

为了避免混淆，第三个[模糊]字段被设置为零; 您可以随意放置任何值。


提交答案