如何获得左箱阴影&仅限右侧

小开

最佳答案

我建议查看下面的@Hamish的回答;它不涉及这里描述的解决方案中不完美的“掩蔽”。

你可以用多个盒子阴影来接近;每边一个

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

编辑

为顶部和底部添加2个更多的盒子阴影，以掩盖流血通过。

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

小开

我不满意Deefour的解决方案中圆形的顶部和底部的阴影，所以创建了我自己的解决方案。

inset box-shadow创建了一个漂亮的统一的阴影与顶部和底部切断。

要在元素的侧面使用这种效果，创建两个伪元素:before和:after，它们绝对位于原始元素的侧面。

div:before, div:after {
content: " ";
height: 100%;
position: absolute;
top: 0;
width: 15px;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
left: -15px;
}
div:after {
box-shadow: 15px 0 15px -15px inset;
right: -15px;
}


div {
background: #EEEEEE;
height: 100px;
margin: 0 50px;
width: 100px;
position: relative;
}

<div></div>

Edit

Depending on your design, you may be able to use clip-path, as shown in @Luke's answer. However, note that in many cases this still results in the shadow tapering off at the top and bottom as you can see in this example:

div {
width: 100px;
height: 100px;
background: #EEE;
box-shadow: 0 0 15px 0px #000;
clip-path: inset(0px -15px 0px -15px);
position: relative;
margin: 0 50px;
}

<div></div>

小开

试试这个，对我很管用:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

小开

这适用于所有浏览器:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;

小开

你必须使用多个box-shadow;。inset属性使它看起来很漂亮，在里面:

div {
box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}

<div></div>

小开

负扩散和掩蔽阴影

CSS 不必使用4个参数:

box-shadow: 10px 0 8px -8px black;

blur参数添加了渐变效果，但也在顶部和底部边框上添加了一些阴影。为了消除这种副作用，我们可以使用:

负spread减少了所有边界上的阴影:你可以尝试删除小的垂直阴影，而不影响侧面的阴影(对于小阴影更容易，5到10px)。
遮蔽与背景相同颜色的阴影(在本例中为白色)，这允许标记阴影。注意，这个掩蔽阴影需要有blur = 0来完全覆盖副作用。

这里有两个例子，第二个使用掩蔽阴影:

div{
width: 100px;
height: 100px;
border: 1px solid green;
margin: 10px;
float: left;
}
#example1{
box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
#example2{
box-shadow:
0 -6px white,
0 6px white,
-7px 0 4px -3px black,
7px 0 4px -3px black;
}

<div id="example1"></div>
<div id="example2"></div>

如果这些方法都不能满足您的需求，您还可以在任何现有div的旁边添加一个绝对div。

只要记住将容器div设置为position: relative，这样这个绝对div就会留在里面。

#example3 {
position: relative;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid green;
}


.shadow {
position: absolute;
height: 100%;
width: 4px;
left: 0px;
top: 0px;
box-shadow: -4px 0 3px black;
}

<div id="example3">
content here
<div class="shadow"></div>
</div>

小开

为了在图像或任何其他内容的左右两侧设置一个漂亮的嵌入阴影，可以这样使用它(z-index:-1在显示带有嵌入的图像或内部对象时非常有用):

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}


.innercontent{
z-index:-1
}

<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

小开

另一种方法是在父对象上用overflow-y:hidden填充:

body {
padding: 30px;
}
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}

<div id="wrap">
<div></div>
</div>

小开

在某些情况下，你可以用另一个容器来隐藏阴影。例如，如果在带有阴影的DIV上面和下面都有一个DIV，你可以在周围的DIV上使用position: relative; z-index: 1;。

小开

仅对于水平，你可以欺骗box-shadow在它的父div上使用overflow:

.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}

<div class="parent">
<div class="box-shadow">content</div>
</div>

小开

另一个想法可能是创建一个暗模糊的伪元素，最终与透明度模仿阴影。让它的高度稍低，宽度稍宽。

小开

你可以在里面使用一个div来“擦除”阴影:

.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;


}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}

你可以使用“高度:%;”和“宽度:%;”来删除你想要的阴影。

小开

这招对我很管用:

box-shadow: 0 5px 5px 0 #000;

小开

我试图复制引导shadow-sm只是在右边，这是我的代码:

.shadow-rs{
box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}

小开

clip-path现在(2020)是我发现的在元素的特定侧面实现盒影的最好方法，特别是当需要的效果是“干净的切割”;特定边缘的阴影，像这样:

.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px -15px);


/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}

<div class="shadow-element"></div>

...as opposed to an attenuated/reduced/thinning shadow like this:

.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);


/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}

<div class="shadow-element"></div>

Simply apply the following CSS to the element in question:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

地点:

Apx设置上边缘的阴影可见性
Bpx正确
Cpx底部
Dpx左

对于应该隐藏阴影的任何边，输入一个0的值，对于应该显示阴影的任何边，输入一个负值(与模糊半径+扩展值- Xpx + Ypx的组合结果相同)。

小开

如果你想在你的div上面有一个箭头，使用这个:

box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);