Html 框阴影在交互时出现小故障

我在我的股票图像上有一个用方框阴影创建的小插曲。它看起来不错，但有时当我按下那个小插曲顶部的按钮，或者当我选择文本时，它只在那个看起来不好的区域消失

<div>
    <div class="stock-image flex-container">
      <div class="column">
        <div class="row column">
          <div>
            <h1 class="welcome">Connect with people</h1>
          </div>
         </div>
        </div>
     </div>
</div>

有时，当我选择“与人连接”时，它会删除选定区域内的阴影，取消选择后，阴影仍然丢失

此外，我不能仅仅在photoshop中创建渐晕图，因为图像可视性取决于用户使用的设备屏幕大小，所以通常只有部分图像可见

编辑： 作为解决方法，我使用了两个线性渐变：

linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.0) 65%, rgba(0,0,0,0.15) 85%, rgba(0,0,0,0.75) 100%)
linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.0) 65%, rgba(0,0,0,0.15) 85%, rgba(0,0,0,0.75) 100%)

---

它看起来没有我想要的那么好，但我想这只是一个参数选择的问题。

我没有解决您问题的方法，但它似乎与chrome的一个已知问题有关：
这篇文章也引用了：

因此，您使用的设计被视为渲染错误

在这里，您可以使用不同的浏览器比较代码的呈现：
铬：
firefox:
firefox one被视为“正常”

另外，您的阴影和选择问题似乎不会出现在firefox上

---

为了获得一个可扩展的图像，你可能需要使用9-patch图像，这是一种在安卓系统上特别使用的技术。我真的不太了解它…

您可以尝试通过-webkit-box-shadow在CSS中直接寻址Chrome-例如：

-webkit-box-shadow: 4px 4px 4px 4px rgba(22,156,202,0.65);
box-shadow: 4px 4px 4px 4px rgba(22,156,202,0.65);

---

你用的是chrome还是opera？我用的是chrome。你发布的链接正好显示了我的问题。因此，我想我必须找到解决办法，而不使用box-shadow。或者可能是边界图像的组合。。。。对不起，我帮不了你了^^

-webkit-box-shadow: 4px 4px 4px 4px rgba(22,156,202,0.65);
box-shadow: 4px 4px 4px 4px rgba(22,156,202,0.65);