代码之家 › 专栏 › 技术社区 › man

CSS-如何具有或模拟仅适用于内部的半径边框

mask svg css

man · 技术社区 · 1 年前

(有点)期望的结果

.parent {
    width: 600px;
    height: 300px;
    --border-opacity: 0.5;
    --border-color: rgba(229, 128, 255, var(--border-opacity));
    --inner-opacity: 0.2;
    --inner-bkg: rgba(255,255,255, var(--inner-opacity));
    background: #000;
}

.box {
  width:150px;
  height:100px;
  margin:10px;
  border:10px solid var(--border-color);
  background:
   radial-gradient(farthest-side at bottom right,#0000 98%, var(--border-color)) top left / 30px 30px,
   radial-gradient(farthest-side at top    right,#0000 98%, var(--border-color)) bottom left / 20px 20px,
   radial-gradient(farthest-side at bottom left ,#0000 98%, var(--border-color)) top right / 50px 50px,
   radial-gradient(farthest-side at top    left ,#0000 98%, var(--border-color)) bottom right/ 10px 10px,
   var(--inner-bkg);
  background-repeat:no-repeat;
  background-origin:padding-box;
}

<div class="parent"><div class="box"/></div>

背景:

在网格中,“box”div在垂直和水平方向上重复多次。
网格本身有圆角,但比单个框大,因此我给出的例子右上角的半径更大。
网格位于视频顶部(就本问题而言,将黑色背景视为视频)

要求

在视频中的某些时间戳处,整个网格具有不同程度的不透明度(问题的根源)
边框和盒子内部都必须具有可单独控制的不透明性。
内部形状就像一个面具(切掉盒子的内部),这样就可以看到后面的视频。我还必须为可以应用不透明度的内部形状添加背景。
“盒子”确实如此 not 具有固定的维度,因此无论存在什么解决方案,都需要考虑响应性
纯CSS解决方案(无JS)

到目前为止,我尝试了什么:

使用CSS mask 使用内联SVG rect
- 这种方法有两个问题
  - 无法仅控制一个角的半径(除非向其添加剪辑路径),即便如此,在响应场景中,剪辑路径也不会与父对象的边界半径正确对齐。
  - 无法/不知道如何制作 rect 响应性(它总是需要即。 height: calc(100% - var(---border-width * 2)) …宽度也是如此。
找到一种方法,让边界的半径只在内侧(运气不佳)

提供的代码片段是我最接近实现所需的代码片段,但存在一些问题。

右侧有一条奇怪的线(可能是因为边界和径向渐变都有不透明度,并且它们略微相交)-断路器
看起来太复杂了
内部元素的半径总是固定的(就像盒子本身是正方形的一样),老实说,这是我可以接受的,尽管在响应式环境中,预期的结果会略有不同。
改变 --inner-opacity 变量也会影响边界和径向渐变的不透明度-断路器

1 回复 | 直到 1 年前

Temani Afif 1 年前

你可以依靠一个简单的 border-radius 并考虑使用溢出的颜色来模拟您的边框。

.box {
  border-radius: 10px 20px 30px 40px; /* your radius */
  background: #add8e691; /* background color*/
  outline: 999px solid rgb(255 0 0/.8); /* border color (don't touch the 999px) */
  margin: 20px; /* border thickness */
  
  clip-path: inset(0) margin-box;
  height: 100px;
  width: 300px;
}


body {
  background: repeating-linear-gradient(45deg,#fff 0 10px,#eee 0 20px);
}

<div class="box"></div>