在这个设计中，我们如何从左侧或右侧移除盒子阴影？答案

【问题标题】：How can we remove box shadow from left or right in this design?在这个设计中，我们如何从左侧或右侧移除盒子阴影？
【发布时间】：2020-05-12 11:17:35
【问题描述】：

这是我的示例图片：

Codepan : [https://codepen.io/vijayhardaha/details/GRgLgZR][2]

如果有人知道我们怎样才能从左边或右边消失盒子阴影（检查图像）？我不想被左右移动。这不适合我的设计。

如果有人有任何想法或技巧，请向我提出建议。这是一个输入组，在焦点上，我在输入和输入附加项上应用了一个框阴影。

谢谢

【问题讨论】：

【解决方案1】：

我在 html 中创建了两个不同的框，并将 box-shadow css 应用于两者。

这会从 box box-shadow 的右侧移除 box-shadow: -10px 15px 8px 5px #888888; （搜索栏框）

这会从 box-shadow 的左侧移除 box-shadow: 10px 15px 8px 5px #888888; （搜索图标框）

【讨论】：

更改偏移量不起作用。因为我会打破设计和外观。如果即使我用移动偏移来解决这个问题。并尝试隐藏一个额外的4px offset。问题是我正在使用4px border-radius，当我尝试从输入（左）和搜索图标（右）隐藏额外的 4px 时，它也会被隐藏
link 这是代码盘。