盒子阴影只在左右 [英] Box-shadow only on right and left

问题描述

我只需要在元素的右侧和左侧制作一个阴影框。它应褪色并变薄至顶部和底部。它也不应该在顶部和底部流动。

I need to make a box-shadow only on the right and left of an element. It should fade and get thinner to the top and bottom. It also shouldn't oveflow on top and bottom.

主要问题是我无法防止阴影在元素的顶部和底部溢出。

The main issue is that I can't prevent the shadow to overflow on the top and bottom of the element.

这就是我所拥有的：

HTML：

<div></div>

CSS：

div{
    box-shadow: 0px 0px 20px 0px #000000;
}

推荐答案

您将需要使用两个框阴影一个用于左侧阴影，另一个用于右侧阴影。您需要在同一box-shadow属性中同时指定两个box-shadow，并用逗号分隔它们：

You will need to use two box-shadows one for the left shadow and one for the right one. You need to specify both box-shadows in the same box-shadow attribute and seperate them with a coma :

box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;

两者均需具有负展布值，因此它们比divs高度短且不会溢出在顶部和底部。

Both need to have a negative spread value so they are shorter than the divs height and don't overflow on the top and bottom.

DEMO

DEMO

输出：

您需要调整阴影中的值以便使其适应您要在其上使用的元素的大小。

You will need to tweak the values of the shadow in order to adapt it to the size of the element you want to use it on.

HTML：

<div></div>

CSS：

div{
    height:500px;
    width:300px;
    margin:0 auto;
    box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;
}

这篇关于盒子阴影只在左右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！