边框-具有边框半径的图像-但没有边框颜色覆盖
我想创建一个透明的圆形按钮，点击它应该有条带边框。我想用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椭圆而不是边框-但现在可能有一个更简单的解决方案。（是否可以将边界半径与具有渐变的边界图像一起使用？）
共有1个答案
您可以使用::before和::after类
看看这把小提琴
-
问题内容： 我想在表格中某个字段的上方放置一条线，以表明它是上述值的总和。但是，该表默认情况下已经带有边框。 这是一个示例：我有一张折叠了边框的桌子。我将边框底部设置在一个字段上，将边框顶部设置在其下方的字段上。这两个都指定相同的边框。使用最上面的CSS。有没有一种方法可以使用最底层的？ 这显示了两个单元格之间有一条红线。有办法获得金线吗？ 问题答案： 这是的已定义行为。《 O’Reilly CS
-
问题内容： 我有以下在Firefox，Chrome和Safari中可用的工具。但不是在IE9中。它在td的左上和右上应用圆角。我想念什么？ 问题答案： 您是否已将其放在HTML文档的顶部（在标记上方） IE9要求此网站显示新的HTML5 / CSS3内容 编辑：或许多其他Doctype（XHTML等，但这是最短和最容易记住的）
-
当前结果：下边框为灰色 所需结果：所有边框均为白色 问题：CSS中的边框颜色设置为白色
-
我有一个表格，每个边框都设置为1px宽。我希望顶部、左侧和底部边框是黑色的，右侧边框是白色的。所以，我使用了这个css代码 问题出现在IE9中，其中右上角的像素为白色，而右下角的像素为黑色。 我怀疑问题来自IE9重组样式的方式，因为当我在开发工具控制台中查看我的表的css时，它是这样排序的： 这让我想，也许，用于定义颜色的顺序使其顶部边框为黑色，然后右侧边框为白色（覆盖右上角），然后底部边框为黑色
-
为了实现丰富多彩的边框效果，在CSS3中，新增了 border-image属性，这个新属性允许指定一幅图像作为元素的边框。该属性的优点是，可以根据一些简单的规则，把一幅图像划分为 9 个单独的部分，浏览器会自动使用合适的部分作为边框的对应部分。 需要注意的是，只有当 border-style属性取值为 none 时，border-image属性才会有效。所以，如果定义的边框图像显示不出来，首先需要
-
问题内容： 我在弄清楚为什么在使用chrome而不是firefox或ie9时为什么#screen元素的边框半径消失了？ 对于每个浏览器，我都有所有不同的前缀以及标准的border-radius： 保存图片的上方内容框称为#screen 屏幕css的副本粘贴： 是因为chrome无法正确处理图像的“裁剪”吗？我认为这只是一个问题，当您在圆角容器中包含实际标签时，而不是通过css将img称为背景图像时