任何方法得到盒影在左和右(水平?)边只有没有黑客或图像。我正在使用:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
但周围都是阴影。
我在元素周围没有边界。
任何方法得到盒影在左和右(水平?)边只有没有黑客或图像。我正在使用:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
但周围都是阴影。
我在元素周围没有边界。
当前回答
另一个想法可能是创建一个暗模糊的伪元素,最终与透明度模仿阴影。让它的高度稍低,宽度稍宽。
其他回答
另一种方法是使用overflow-y:隐藏在带有填充的父类上:
身体{ 填充:30 px; } #包装{ overflow-y:隐藏; 填充:0 10px; } #包装> div { 宽度:100 px; 身高:100 px; Box-shadow: 0 0 20px -5px红色; } < div id = " wrap " > < div > < / 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 >
试试这个,对我很管用:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;