我需要在一些块元素上创建一个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 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
这可能是一个简单的方法
border-right : 1px solid #ddd;
height:85px;
box-shadow : 10px 0px 5px 1px #eaeaea;
将此分配给任何div
这是我做的一个小技巧。
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>
1. 创建一个<div class="one_side_shadow"></div>在我想创建的单面框阴影的元素下面(在这种情况下，我想为id="element"从底部来一个单面插入阴影)
2. 然后我用负的垂直偏移量创建了一个常规的盒子阴影，将阴影向上推到一边。
`box-shadow: 0 -8px 20px 2px #DEDEE3;`
是的，你可以使用box-shadow规则的阴影扩展属性:
.myDiv { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 10px 0 5px -2px #888; ｝ < div class = " myDiv " > < / div >
第四个属性-2px是阴影的扩展，你可以用它来改变阴影的扩展，使它看起来只在一边。
这也使用了阴影定位规则10px将其发送到右侧(水平偏移量)，0px将其保持在元素下方(垂直偏移量)。
5px是模糊半径:)
举个例子。
为了获得最多两面的剪裁效果，你可以使用带有背景渐变的伪元素。
header::before, main::before, footer::before, header::after, main::after, footer::after {
display: block;
content: '';
position: absolute;
width: 8px;
height: 100%;
top: 0px;
}
header::before, main::before, footer::before {
left: -8px;
background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
header::after, main::after, footer::after {
right: -8px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
将在通常组成文档的元素的左右添加一个漂亮的阴影效果。
