Question

有没有办法创建一个带有“模糊”轮廓和圆角的半透明蒙版，而不使用各种虚拟元素来定位该蒙版？这个例子展示了3个虚拟元素的想法。

html {
  padding: 0;
  margin: 0;
}

body {
  background: url(https://unsplash.it/1000/1000) no-repeat;
  padding: 0;
  margin: 0;
}

.outer {
  max-width: 20rem;
  position: relative;
}

.inner {
  color: white;
  position: relative;
  z-index: 9999;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 6rem;
  right: 0;
  background: rgba(0, 0, 0, .1);
}

.mask .bottom {
  position: absolute;
  bottom: -10rem;
  height: 10rem;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 100%);
}

.mask .right {
  position: absolute;
  right: -4rem;
  width: 4rem;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 100%);
}

.mask .bottom-right {
  position: absolute;
  right: -4rem;
  bottom: -10rem;
  width: 4rem;
  height: 10rem;
  /* 1 / sqrt(2) */
  background: radial-gradient(ellipse at 0 0, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 70.71%);
}

<div class="outer">
  <div class="mask">
    <div class="bottom"></div>
    <div class="right"></div>
    <div class="bottom-right"></div>
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id pharetra nulla. Mauris ultricies aliquam augue, tristique convallis turpis pulvinar tincidunt. Curabitur pretium sollicitudin imperdiet. Maecenas venenatis dignissim dolor vitae tempor.
    Morbi non posuere ipsum. Vivamus vel tincidunt magna. Cras dictum lacinia massa, vel malesuada lacus sollicitudin eget.
  </div>
</div>

我尝试过使用border-image，但发现右边框看起来很奇怪，我只能使用线性渐变来为它着色，这限制了我的选择。它也会与背景颜色发生冲突，并且不适用于border-radius。

我也尝试制作复合渐变，但似乎只能定义起始位置和角度（对于线性渐变）。这会使渐变重叠，如果边框不总是透明的话我可以使用它，并且在定义重叠渐变之前不可能使用完全填充颜色区域的技术。

有没有一种更聪明的方法来实现这一点，例如，伪元素？

Answer 1

据我所知，不可能只使用伪元素来获得我想要的效果，使得具有三个子元素的.mask元素的方法成为完成该掩码的最佳选择。嗯，那，或者只是使用图像。

如何创建圆形半透明蒙版

1 个答案: