Html 如何在css中使用边框的剪辑路径属性

我有

剪辑部分

来产生“切角”效果

我想改变背景为白色，并使用绿色边框。问题是，当我将背景更改为白色时，角点是空的：

如何在hover上创建绿色边界角

.test{
背景：红色；
宽度：100px；
高度：100px；
/*角落*/
剪辑路径：多边形（10px 0%，计算（100%-10px）0%，100%10px，100%calc（100%-10px），计算（100%-10px）100%，10px 100%，0%calc（100%-10px），0%10px）；
}
.测试：悬停{
背景：白色；
光标：指针；
边框：3倍纯绿；
}

---

测试

添加一些渐变以填充缺少的空间：

.test{
背景：红色；
宽度：100px；
高度：100px；
框大小：边框框；
/*角落*/
剪辑路径：多边形（10px 0%，计算（100%-10px）0%，100%10px，100%calc（100%-10px），计算（100%-10px）100%，10px 100%，0%calc（100%-10px），0%10px）；
}
.测试：悬停{
--等级：透明49.5%，绿色50%；
背景：
线性梯度（至右上角，var（--grad））右上角，
线性梯度（至左上角，变量（--grad））左上角，
线性梯度（至右下角，var（--grad））右下角，
线性梯度（至左下角，变量（--grad））左下角，
白色
背景尺寸：13px 13px；/*10px剪辑路径+3px边框*/
背景重复：无重复；
背景来源：边框框；
光标：指针；
边框：3倍纯绿；
}

---

据我所知，用剪辑路径在元素周围创建边框是不可能的。此方法使用内部和外部元素。 资料来源：

。外部{
位置：相对位置；
宽度：70vmin；
高度：70vmin；
背景：红色；
-webkit剪辑路径：多边形（50%0%、83%12%、100%43%、94%78%、68%100%、32%100%、6%78%、0%43%、17%12%）；
剪辑路径：多边形（50%0%，83%12%，100%43%，94%78%，68%100%，32%100%，6%78%，0%43%，17%12%）；
}
.里面{
位置：绝对位置；
顶部：5px；
左：5px；
右：5px；
底部：5px；
背景：红色；
-webkit剪辑路径：多边形（50%0%、83%12%、100%43%、94%78%、68%100%、32%100%、6%78%、0%43%、17%12%）；
剪辑路径：多边形（50%0%，83%12%，100%43%，94%78%，68%100%，32%100%，6%78%，0%43%，17%12%）；
}
.内：悬停{
背景：白色；
过渡：all.2s；
}
.外面：悬停{
背景：绿色；
过渡：all.2s；
}
/*演示中心*/
html，正文{高度：100%；}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：番木瓜；
}

---

为了便于阅读，我将回答我的评论：

对于infos，如果在2层容器上使用

剪辑路径

，则可以使用

drop-shadow（）

过滤器在半透明边缘周围添加阴影

• 剪辑路径

  应用于子对象

• drop-shadow（）

  在父对象上
• 没有模糊，无论形状如何，它看起来都像一个边框：

下面代码段中的JSFIDLE演示：

.testdiv{
背景：红色；
宽度：100px；
高度：100px；
/*角落*/
剪辑路径：多边形（10px 0%，计算（100%-10px）0%，100%10px，100%calc（100%-10px），计算（100%-10px）100%，10px 100%，0%calc（100%-10px），0%10px）；
}
.测试：悬停{
过滤器：投影（0px 3px 0px绿色）投影（3px 0px 0px绿色）投影（-3px 0px 0px绿色）投影（0px-3px 0px绿色）；
/*每边1个*/
}
.测试：悬停div{
背景：白色；
光标：指针；
}
.测试{
宽度：最大含量；
}
.测试组{
/*演示目的*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}

试验

回答得很好！另外，请记住，IE不支持CSS变量（自定义属性）

--var

。@Vepthy关心IE；）是的，请注意：对于infos，如果在2级容器上使用剪辑路径，则可以使用drop-shadow（）过滤器在半透明边缘周围添加阴影。在子对象上剪裁路径，然后在父对象上放置阴影：