具有边框半径的边框图像 - 但没有边框颜色覆盖答案

【问题标题】：Border-image with border-radius - but without border-color overlay具有边框半径的边框图像 - 但没有边框颜色覆盖
【发布时间】：2018-08-14 14:21:59
【问题描述】：

我想创建一个透明的圆形按钮，点击它应该有一个条纹边框。我想用 HTML、CSS 或必要的 java-script 来做这件事。

这里是一个例子：https://jsfiddle.net/chrichrichri/a9dpg582/38/

border-radius: 50px;

结合：

border-image: -webkit-repeating-linear-gradient(-40deg, yellow, yellow 10%, orange 11%, orange 20%, yellow 21%), 
    -moz-repeating-linear-gradient(-40deg, yellow, yellow 10%, orange 11%, orange 20%, yellow 21%), 
    repeating-linear-gradient(-40deg, yellow, yellow 10%, orange 11%, orange 20%, yellow 21%);

到目前为止，我在 Firefox 中对其进行了测试 - 边框图像考虑了边框半径，但总是有一个边框颜色覆盖 - 如果我有 50% 的透明度，我会看到条带和选定的颜色 - 但我只想条带……如果我使用透明/rgba(0,0,0,0)，则根本不显示边框。为什么？如果有人能解释这里发生了什么，我会很高兴:-)

一个类似的话题已经在 7 年前讨论过了 - 但那里给出的解决方案只适用于具有实心填充的元素 - 好的，您可以添加一个 svg 椭圆而不是边框 - 但也许现在有一个更简单的解决方案. (Possible to use border-radius together with a border-image which has a gradient?)

【问题讨论】：

请发布您遇到问题的代码，最好是在代码 sn-p 中。

标签： css border border-image

【解决方案1】：

您可以使用::before 和::after 类

看看这个fiddle

【讨论】：

但这仅适用于实体元素而不适用于透明元素，或者？
到目前为止，我发现使用伪类的透明按钮的唯一解决方案是“生命环”版本：jsfiddle.net/chrichrichri/1bnv8sza/3 - 这几乎也可以在没有伪类的情况下工作 - 带有虚线边框和径向渐变它在到达边界之前是透明的 - 不幸的是，您无法充分控制背景重复 - 所以伪类是必要的。 - 似乎使用 svg 是我正在寻找的唯一真正的选择：jsfiddle.net/chrichrichri/bqsnpn5k/76