Html 在css中是否可以在遮罩图像中结合线性渐变和径向渐变

body {
  background-image: url("https://picsum.photos/500");
    background-size: cover;
    background-repeat: no-repeat;
}

div {
  width: 500px;
  height: 500px;
  background: purple;
  -webkit-mask-image:
    radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%),
        linear-gradient(180deg, #000000 50%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 50%;
}

<div></div>

body {
  background-image: url("https://picsum.photos/500");
  background-size: cover;
  background-repeat: no-repeat;
}

div {
  width: 500px;
  height: 500px;
  background: purple;
  -webkit-mask-image: 
    /* adjust the 20% to control the radius of the circle */
    radial-gradient(circle at top, #000 20%, #0000 20.5%), 
    linear-gradient(#000 50%, #0000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

<div></div>

Html相关问答推荐

打印pdf时100 vh迪夫有半页高

CSS复选框并排

如何将grid—template—column应用于元素中的子元素

试图让三个Divs与下面的另外三个对齐

悬停时跳转的内容

在css嵌套 Select 器中，尾随的`&；‘是什么意思？

如何阻止Chromecast图标出现在HTML5视频

浏览器是在调整大小还是在全屏上交换视频源？

如何使用多边形制作如图所示的背景

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单？

添加带有悬停动画的喜欢图标

如何实现与内嵌图像对齐的自动换行？

在 CSS 中的 div 中获取文本以环绕其他文本？

XPATH Select h2标签和

标签之间或h2标签和 标签之间的td元素，以立即为准

使用 Selenium for Python 在网站上查找类名称中包含换行符的元素

Header 或 P 标记中的填充不能与 em 单元一起正常工作

使用 htmloutput 在shiny 的应用程序中呈现文本

更改包含图标高度的 div

如何阻止网格项目拉伸？

如何将内容从侧边栏的底部移动到右侧？