如何仅在CSS中屏蔽具有多个形状的div框

发布于07月14日

我是一个编程新手，我正在试图弄清楚如何在某些位置的边缘上用多个圆圈来掩蔽div框，以便在图片中得到类似的东西.该网站是www.stampfinity.com-首页向下滚动的渐变框所在的地方.我正在使用这个项目的Wordpress与包含主题和编辑的主题在快速-css类的css.

This is how the div boxes are supposed to look:

个

我try 了几个"偷工减料"的代码，并试图修改，但无论我try 了什么，我都失败了，因为它只是做了一些完全奇怪的事情，或者毁了整个事情.

在这个特定的例子中，我可以将第一个圆向下移动，但如果我try 下一个圆，它就会使整个过程崩溃.

.divbox {

  -webkit-mask:
    radial-gradient(circle 30px at 0% 50%,#0000 98%,#000),
    radial-gradient(circle 30px at top    right,#0000 98%,#000) top    right,
    radial-gradient(circle 30px at bottom left ,#0000 98%,#000) bottom left,
    radial-gradient(circle 30px at bottom right,#0000 98%,#000) bottom right;
  -webkit-mask-size:50% 50%;
  -webkit-mask-repeat:no-repeat;

}

如果我try 这个代码，也会发生类似的事情

.divbox {
  --mask:
    radial-gradient(40px at 0 60%,#0000 98%,#000) 0/51% 100% no-repeat,

    radial-gradient(40px at 0% 80%,#0000 98%,#000) 100%/51% 100% no-repeat;

  -webkit-mask: var(--mask);
          mask: var(--mask);
}

不管我怎么try ，我都不能把圆圈放在我想要的位置.理想情况下，我只想放置一个具有X/Y相对位置的圆(即0%80%)，并将圆大小调整为div框大小

.box { width:300px; height: 250px; margin: 50px; background: red; --s: 25px at; /* circle size here */ --g: #000 98%,#0000; -webkit-mask: /* X Y */ radial-gradient(var(--s) 0 80%,var(--g)), radial-gradient(var(--s) 0 50%,var(--g)), radial-gradient(var(--s) 100% 20%,var(--g)), radial-gradient(var(--s) 100% 50%,var(--g)), /* don't touch the bottom layer*/ linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

如何仅在CSS中屏蔽具有多个形状的div框

推荐答案

Css相关问答推荐

基于子元素的子元素数量的样式元素

可折叠/可展开的数据表行：如何使Shadcn数据表中的可折叠内容全宽？

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

如何在点击时停止动画并将其返回到第一帧？

滚动弹性盒

在具有特定类的 td 之后，如何编写适用于该行上所有 td 元素的表行的 CSS Select 器？

SCSS - Lighten/Darken 不编译？

如何为以下布局安排网格？

使用：checked 显示隐藏的侧面板

为什么 em 不将定义的字体大小加倍？

如何将 Google 字体链接到我的 Nuxt 文件？

使用 CSS 无限期地闪烁两个不同持续时间的文本

如何制作一个居中的标题样式，其中换行符将最长的行排列在底部

使用 CSS3 生成重复的六边形图案

为什么 .class：last-of-type 不能按我的预期工作？

使用 float：left 后如何获得新行？

输入/按钮元素不会在 flex 容器中缩小

位置元素垂直固定，绝对水平

如何将 bootstrap 列高设为 100% 行高？

如何在 CSS 中绘制一个圆形扇区？