交互时的框阴影故障

Question

我的库存图片上有一个小插图，是用 box-shadow 创建的。它看起来不错，但有时当我按下那个小插图顶部的按钮或当我 select 文本时，它只会在看起来很糟糕的 selection 区域消失。

<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>

Css:

.stock-image {
    width: 100%;
    height: 32em;
    background: linear-gradient(90deg, rgba(22, 156, 202,0.65), rgba(22, 156, 202,0.45)),#00A7E1 url(../../assets/img/home/stock-image.jpg) no-repeat center center;
    background-size: cover;
    box-shadow: inset 0 0 30em 0.7em #000;
}

有时，当我 select Connect with people 它会删除 selected 区域内的阴影，并且在 deselecting 之后，阴影仍然丢失。

我也不能只在 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%)

它看起来没有我想要的那么好，但我想这只是调整参数的问题。

Answer 1

我没有解决你问题的方法，但它似乎与 chrome 的一个已知问题有关：https://code.google.com/p/chromium/issues/detail?id=442335
也在此引用 post :

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

在这里您可以比较您的代码在不同浏览器下的呈现：
chrome : http://imgur.com/Bu9b0hB
火狐浏览器：http://imgur.com/ChJclHz
firefox 被认为是 'normal'.

此外，您的阴影和选择问题似乎并未出现在 firefox 上。

要获得可扩展图像，您可能需要使用 9 补丁图像，这是一项在 android 上特别使用的技术。我真的不是很了解...

Answer 2

您可以尝试通过 -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);

交互时的框阴影故障

box-shadow glitch when interacting

html

css

box-shadow