任何方法得到盒影在左和右(水平?)边只有没有黑客或图像。我正在使用:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
但周围都是阴影。
我在元素周围没有边界。
任何方法得到盒影在左和右(水平?)边只有没有黑客或图像。我正在使用:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
但周围都是阴影。
我在元素周围没有边界。
当前回答
试试这个,对我很管用:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
其他回答
对于水平,你可以在它的父div上使用overflow欺骗box-shadow:
.parent { 溢出:隐藏; } .box-shadow { Box-shadow: 0 5px 5px 0 #000; } < div class = "父" > < div class = "不必“>内容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;
}
你可以使用“高度:%;”和“宽度:%;”来删除你想要的阴影。
你必须使用多个盒子阴影;. Inset属性使它看起来很漂亮,在里面:
div { 框影:插入0 12px 15px -4px rgba(31, 73, 125, 0.8),插入0 -12px 8px -4px rgba(31, 73, 125, 0.8); 宽度:100 px; 身高:100 px; 保证金:50 px; 背景:白色; } < div > < / div >
这适用于所有浏览器:
-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;
clip-path现在(2020)是我发现的在元素的特定侧面实现盒阴影的最佳方法,特别是当所需的效果是在特定边缘的“干净切割”阴影时,就像这样:
.shadow-element { 宽度:100 px; 身高:100 px; background - color: # FFC300; Box-shadow: 0 0 10px 5px rgba(0,0,0,0.75); 剪辑路径:插入(0px -15px 0px -15px); /*位置和左属性需要将元素从父元素的边缘带出来 这样影子就能被看见;左边距也可以实现相同的功能*/ 位置:相对; 左:15 px; } < div class = " shadow-element " > < / div >
...而不是像这样减弱/减少/变薄的阴影:
.shadow-element { 宽度:100 px; 身高:100 px; background - color: # FFC300; 盒影:15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75); /*位置和左属性需要将元素从父元素的边缘带出来 这样影子就能被看见;左边距也可以实现相同的功能*/ 位置:相对; 左:15 px; } < div class = " shadow-element " > < / div >
简单地将以下CSS应用到有问题的元素:
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的组合结果相同)。