Question

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

这是一个例子：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?）

Answer 1

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

查看此fiddle

具有border-radius的边框图像 - 但没有边框颜色叠加

1 个答案: