CSS 透明径向渐变问题

Question

我是CSS渐变的新手，并试图掌握它，我正在尝试应用白色透明的css渐变来用背景图像包围圆形div的边框。不幸的是，我得到的efftect不是想要的，我怎样才能使它看起来不那么被渐变遮挡，并且渐变不像现在那么宽，我想让它只影响图像的边界，比如距离外环大约30像素深。

我的代码：

.transparent-gradient::after {
content: "";
background-image: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.transparent-gradient{
width:300px; height:300px; margin:20px 0px; align-self:center;position:relative; overflow:hidden; background-color:red;border-radius:50%; background-size:cover; background-position:center; background-image:url('https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80');
}

<div class="transparent-gradient" style=""></div>

Answer 1

.transparent-gradient::after {
content: "";
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 40%,rgba(255,255,255,.9) 100%);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.transparent-gradient{
width:300px; 
height:300px; 
margin:20px 0px; 
align-self:center;
position:relative; 
overflow:hidden; 
background-color:red;
border-radius:50%; 
background-size:cover; 
background-position:center; 
background-image:url('https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80');
}

<div class="transparent-gradient" style=""></div>

rgba(255,255,255,0) 40%40%指定"大小"。 使用.9rgba(255,255,255,.9) 100%，可以使白色不那么难(来自rgbA的不透明度/alpha(。1是完全白色的.5white具有50%不透明度。