用CSS重叠颜色

Question

你将如何创建一个不同颜色的不规则边框，如截图中的那个？

我考虑在图形编辑器中创建边框图像，然后使用docs中描述的border-image属性。

然而，这种技术不允许我实现多种背景颜色（截图中的灰色和白色）进入边界＆＃34;波浪＆＃34;。

另一种解决方案是在Photoshop中生成白色和灰色的整个背景，并在网站上使用它。出于性能原因，我真的想避免这种情况，并且更愿意只生成一个灰色的，经过检查的模式片段并重复它。

此外，正如您在屏幕截图中看到的，黑暗片段是来自旋转木马的图像 - 图像将全部采用不同的颜色，因此将边框图像应用于旋转木马容器也不是解决方案。

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

Answer 1

使用SVG：

您可以使用SVG执行此操作。我会说它非常复杂，因为该方法使用重复圆的模式，一个模式作为填充的掩模，以产生透明切割。然后将该蒙版应用于图像以产生完整效果。在我看来，这是最接近你想要的，也有良好的浏览器支持。它适用于IE10 +，Edge，Firefox，Chrome，Opera和Safari。

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

＆＃13;

＆＃13;

.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");
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用CSS：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;