任何方法得到盒影在左和右(水平?)边只有没有黑客或图像。我正在使用:

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;