0
有沒有辦法創建一個帶有「模糊」輪廓和圓角的半透明蒙版，而無需使用各種虛擬元素來定位蒙版？這個例子顯示了帶有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>我一直在使用邊界圖像試過了，卻發現右邊框看起來很奇怪，那我只能用一個線性漸變上色它限制了我的選擇很多。它也與背景顏色衝突並且不能與邊界半徑一起使用。
我也試着做一個複合漸變，但它似乎只能定義一個起始位置和一個角度（對於線性漸變）。這將使梯度重疊，如果邊界不總是透明的，並且使得在定義重疊梯度之前不可能使用用顏色完全填充區域的技術，則可以處理這些梯度。
是否有更聰明的方式來完成這一點，例如，僞元素？