如何使用 css 在 div 元素的右侧添加 box-shadow？ [复制]答案

【问题标题】：How to add box-shadow to the right of the div element using css? [duplicate]如何使用 css 在 div 元素的右侧添加 box-shadow？ [复制]
【发布时间】：2020-08-14 07:30:07
【问题描述】：

我有一个 div 元素，我只想将 box-shadow 添加到 div 元素的右侧。

下面是我的代码，

<div class="wrapper">
    <div class="child_divs"> //want boxshadow to the right of this div
        <span>first</span>
    </div>
    <div class="child_divs">
        <span>second</span>
    </div>
</div>


.wrapper {
    display: flex;
    flex-direction: row;
    height: 48px;
    & > :first-child {
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.16); //this adds boxshadow to right          and bottom of div_one.
    }
}

.child_divs {
    display: flex;
    flex-direction: column;
    padding: 16px 0 0 16px;
    border-radius: 0 8px 0 0;
}

这会在第一个子 div 的右侧和底部添加 box-shadow。我只希望它在右侧。下面是上面代码的样子。

如上图所示，红色标记的那个。我不想要第一个子 div 的底部 boxshadow。我怎样才能解决这个问题。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

尝试在此处设置 box-shadow

https://www.cssmatic.com/box-shadow

如果你得到了你喜欢的，只需复制代码并将其应用到元素上：)

【讨论】：

感谢我尝试过使用它。但它给了我更厚的盒子阴影......在我的例子中，我尝试了 box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.16);并为 div 元素的顶部底部和右侧添加 boxshadow。