Question

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

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

有时当我选择Connect with people时，它会移除所选区域内的阴影，取消选择后，阴影仍然缺失。

此外，我不能在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
在这篇文章中也引用了：
border-radius with box-shadow inset pixelized / rugged

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

在这里，您可以将代码的渲染与不同的浏览器进行比较：
chrome：http://imgur.com/Bu9b0hB
firefox：http://imgur.com/ChJclHz
firefox被认为是“正常的”。

你的阴影和选择问题似乎也没出现在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);

交互时的盒子阴影故障

2 个答案: