image - 使用 CSS 重叠颜色创建不规则边框

Question

您将如何创建一个像屏幕截图中那样具有可变颜色的不规则边框？

我考虑过在图形编辑器中创建边框图像，然后使用 border-image 属性，如 docs 中所述.

但是，这种技术不允许我实现多种背景颜色(屏幕截图中的灰色和白色)进入边框“波浪”的效果。

另一种解决方案是在 Photoshop 中生成整个背景的白色和灰色，然后在网站上使用它。出于性能原因，我真的很想避免这种情况，并且宁愿只生成一个灰色的格子图案片段并重复它。

此外，正如您在屏幕截图中看到的那样，深色片段是来自轮播的图像 - 这些图像都将采用不同的颜色，因此将边框图像应用于轮播容器也不是解决方案。

我会很感激一些建议。谢谢。

Answer 1

使用 SVG:

您可以使用 SVG 来做到这一点。我会说它非常复杂，因为该方法使用重复圆圈的图案，以图案作为填充的 mask 来产生透明切口。然后将此蒙版应用于图像以产生完整效果。在我看来，这是最接近您想要的，并且具有良好的浏览器支持。它在 IE10+、Edge、Firefox、Chrome、Opera 和 Safari 中运行良好。

但有几点需要注意 - (1) 你必须以某种方式让你的旋转木马与 SVG image 一起工作，否则掩码将不起作用 (2) 圆的半径改变随着容器宽度的变化，因此您要么必须使用固定大小的容器(或)使用 JS 将容器的宽度分配给 viewBox 属性(或找到一些设置以防止半径发生变化，我不知道)。

.masked {
  position: relative;
  height: 175px;
  width: 100%;
  background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%);
  background-size: 51% 100%;
  background-repeat: no-repeat;
  background-position: 0% 0%, 100% 0%;
  padding-top: 100px;
}
.masked svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 100%;
}
path {
  fill: #fff;
}
image {
  mask: url("#mask");
}

<div class='masked'>
  <svg viewBox='0 0 1200 100' preserveAspectRatio='none'>
    <defs>
      <pattern id="circles" patternUnits="userSpaceOnUse" width="10" height="100">
        <path d="M0,0 L10,0 10,95 A5,5 0 0,0 0,95 L0,0" />
      </pattern>
      <mask id="mask">
        <rect height="100%" width="100%" fill="url(#circles)" />
      </mask>
    </defs>
    <image xlink:href='http://lorempixel.com/1200/100/nature/1' x="0" y="0" height="100%" width="100%" />
  </svg>
  Lorem Ipsum Dolor Sit Amet...
</div>

使用 CSS:

这可以使用 CSS 掩码来完成，但不幸的是浏览器对此功能的支持很糟糕。它目前仅在支持 WebKit 的浏览器中受支持。如果不需要支持其他浏览器，那么这是一个很好的选择。我们需要做的就是像下面的代码片段一样为蒙版创建一个径向渐变(在 X 轴上重复)，给它所需的大小并相应地定位它。

.masked {
  position: relative;
  height: 175px;
  width: 100%;
  background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%);
  background-size: 51% 100%;
  background-repeat: no-repeat;
  background-position: 0% 0%, 100% 0%;
  padding-top: 80px;
}
.masked:before {
  position: absolute;
  content: '';
  top: 0px;
  height: 80px;
  width: 100%;
  background: url(http://lorempixel.com/1000/100/nature/1);
  -webkit-mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at 50% 100%, transparent 50%, black 55%);
  -webkit-mask-size: 100% calc(100% - 12px), 12px 12px;
  -webkit-mask-position: 0% 0%, 0px 68px;
  -webkit-mask-repeat: repeat-x;
}

<div class="masked">Lorem Ipsum Dolor Sit Amet</div>