CSS 如何仅在一侧创建插入框阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17572619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a inset box-shadow only on one side?
提问by Ahmad
Is it possible to somehow only have inset box-shadow on one side of a div ? Note that I'm talking about an insetbox-shadow here, not the normal outer box-shadow.
是否有可能以某种方式只在 div 的一侧插入框阴影？请注意，我在这里谈论的是插入框阴影，而不是正常的外部框阴影。
For example, in the following JSFiddle, you'll see that the inset shadow appears on all 4 sides, in varying degrees.
例如，在下面的 JSFiddle 中，您将看到内嵌阴影以不同的程度出现在所有 4 个边上。
How do I get it to ONLY show at the top ? Or at most ONLY at top and bottom ?
我如何让它只显示在顶部？或者最多只在顶部和底部？
JSFiddle:http://jsfiddle.net/ahmadka/KFrun/
JSFiddle：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>回答by Gordon Tucker
This is what you are looking for. It has examples for each side you want with a shadow.
这就是你要找的。它为您想要的每一面提供了带有阴影的示例。
See the js fiddle for more examples: http://jsfiddle.net/KFrun/171/
有关更多示例，请参阅 js fiddle：http: //jsfiddle.net/KFrun/171/
.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);
}
回答by casraf
The trick is a second .box-innerinside, which is larger in width than the original .box, and the box-shadowis applied to that.
诀窍是第二个.box-inner里面，它的宽度比原来的大.box，然后box-shadow应用到那个里面。
Then, added more padding to the .textto make up for the added width.
然后，向 中添加更多填充以.text弥补增加的宽度。
This is how the logic looks:
这是逻辑的样子：
And here's how it's done in CSS:
这是在 CSS 中的实现方式：
Use max width for .inner-boxto not cause .boxto get wider, and overflowto make sure the remaining is clipped:
使用最大宽度.inner-box不会导致.box变宽，并overflow确保其余部分被剪裁：
.box {
max-width: 100% !important;
overflow: hidden;
}
110% is wider than the parent which is 100% in a child's context (should be the same when the parent .boxhas a fixed width, for example).
Negative margins make up for the width and cause the element to be centered (instead of only the right part hiding):
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;
}
And add some padding on the X axis to make up for the wider .inner-box:
并在 X 轴上添加一些填充以弥补更宽的.inner-box：
.text {
padding: 20px 40px;
}
Here's a working Fiddle.
这是一个有效的小提琴。
If you inspect the Fiddle, you'll see:
如果您检查 Fiddle，您会看到：
回答by drkario
Quite a bit late, but a duplicate answer that doesn't require altering the padding or adding extra divs can be found here: Have an issue with box-shadow Inset bottom only. It says, "Use a negative value for the fourth length which defines the spread distance. This is often overlooked, but supported by all major browsers"
有点晚了，但是可以在此处找到不需要更改填充或添加额外 div 的重复答案：仅框阴影插入底部有问题。它说，“对定义传播距离的第四个长度使用负值。这经常被忽视，但所有主要浏览器都支持”
From the answerer's fiddle:
从回答者的小提琴：
box-shadow: inset 0 -10px 10px -10px #000000;
回答by mohkhan
This comes a little close.
这有点接近了。
.box
{
-webkit-box-shadow: inset -1px 10px 5px -3px #000000;
box-shadow: inset -1px 10px 5px -3px #000000;
}
回答by Hamid Talebi
try it, maybe useful...
试试吧，也许有用...
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;
above CSScause you have a box shadow in bottom.
you can red more Here
上面CSS因为底部有一个盒子阴影。
你可以在这里更红
回答by leonheess
This might not be the exact thing you are looking for, but you can create a very similar effect by using rgbain combination with linear-gradient:
这可能不是您正在寻找的确切内容，但您可以通过rgba与linear-gradient以下组合使用来创建非常相似的效果：
background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
This creates a linear-gradient from black with 50% opacity (rgba(0,0,0,.5)) to transparent (rgba(0,0,0,0)) which starts being competently transparent 30% from the top. You can play with those values to create your desired effect. You can have it on a different side by adding a deg-value (linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) or switching the colors around. If you want really complex shadows like different angles on different sides you could even start layering linear-gradient.
这将创建一个线性渐变，从具有 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。
Here is a snippet to see it in action:
这是一个片段，可以看到它的运行情况：
.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>回答by Piyush
Inset Box Shadow only on Top side?
仅在顶部插入框阴影？
#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%;
}
