我需要在一些块元素上创建一个box-shadow，但只是(例如)在它的右侧。我的方法是用box-shadow将内部元素包装成带有padding-right和overflow:hidden的外部元素;所以阴影的其他三面是不可见的。
有没有更好的方法来实现这个目标?喜欢box-shadow-right吗?
编辑:我的意图是只创建阴影的垂直部分。与规则background:url(shadow.png) 100% 0% repeat-y完全相同。
当前回答
好的，再试一次。使用伪元素并在其上应用阴影盒属性。
html:
<div class="no-relevant-box">
<div class="div-to-shadow-1"></div>
<div class="div-to-shadow-2"></div>
</div>
萨斯:
.div-to-shadow-1, .div-to-shadow-2
height: 150px
width: 150px
overflow: hidden
transition: all 0.3s ease-in-out
&::after
display: block
content: ''
position: relative
top: 0
left: 100%
height: 100%
width: 10px
border: 1px solid mediumeagreen
box-shadow: 0px 7px 12px rgba(0,0,0,0.3)
&:hover
border: 1px solid dodgerblue
overflow: visible
https://codepen.io/alex3o0/pen/PrMyNQ
其他回答
我自制的解决方案很容易编辑:
HTML:
<div id="anti-shadow-div">
<div id="shadow-div"></div>
</div>
css:
#shadow-div{
margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
margin-left:0px; /* Set to 20px if you want shadow at the left side */
margin-top:0px; /* Set to 20px if you want shadow at the top side */
margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
box-shadow: 0px 0px 20px black;
height:100px;
width:100px;
background: red;
}
#anti-shadow-div{
margin:20px;
display:table;
overflow:hidden;
}
演示: http://jsfiddle.net/jDyQt/103
剪辑路径现在(2020年)是在元素的特定侧面实现盒影的最简单的方法之一，特别是当所需的效果是在特定边缘的“干净切割”阴影时(我相信这是OP最初寻找的)，像这样:
.shadow-element { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 0 0 15px rgba(0,0,0,0.75); 剪切路径:插入(0px -15px 0px 0px); ｝ < div class = " shadow-element " > < / div >
.．.而不是像这样减弱/减少/变薄的阴影:
.shadow-element { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75); ｝ < div class = " shadow-element " > < / div >
简单地将以下CSS应用到有问题的元素:
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Tpx Rpx Bpx Lpx);
地点:
Tpx设置上边缘的阴影可见性 Rpx正确 Bpx底部 Lpx左
对于应该隐藏阴影的任何边，输入一个0的值，对于应该显示阴影的任何边，输入一个负值(与盒子阴影模糊半径- Xpx相同)。
这可能是一个简单的方法
border-right : 1px solid #ddd;
height:85px;
box-shadow : 10px 0px 5px 1px #eaeaea;
将此分配给任何div
只需使用::after或::before伪元素来添加阴影。使它1px，并把它放在你想要的任何一边。下面是顶部的例子。
页脚{ margin-top: 50 px; 颜色:# fff; background - color: # 009 eff; text-align:中心; 行高:90 px; 位置:相对; ｝ 页脚:{后 内容:”; 位置:绝对的; 宽度:100%; 身高:1 px; 上图:0; 左:0; z - index: 1; Box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75); ｝ <footer> . </footer> .
是的，你可以使用box-shadow规则的阴影扩展属性:
.myDiv { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 10px 0 5px -2px #888; ｝ < div class = " myDiv " > < / div >
第四个属性-2px是阴影的扩展，你可以用它来改变阴影的扩展，使它看起来只在一边。
这也使用了阴影定位规则10px将其发送到右侧(水平偏移量)，0px将其保持在元素下方(垂直偏移量)。
5px是模糊半径:)
举个例子。
