css - 如何使圆形渐变边框变为按钮而不是正方形？

This question already has answers here:

Border Gradient with Border Radius

                                    （2个答案）


                                在8个月前关闭。


请任何人指导我如何使线性渐变css边框变为圆角而不是正方形，以支持所有浏览器？同样，按钮背景色最好是透明的。

.btn_outter {
  border: 2px solid;
  border-image-source: linear-gradient(45deg, #FFF000, #000000);
  border-image-slice: 1;
  color: #000;
}

最佳答案

您可以尝试以下示例

 <!DOCTYPE html>
<html>
<head>
<style>

.btn_outter {
  border: 20px solid;
  border-image-source: radial-gradient(red, green, blue);
  border-image-slice: 20;
  color: #000;
}
.round_div{
    border: 1px solid;
    width: max-content;
    border-radius: 30px;
    overflow: hidden;
}

</style>
</head>
<body>
<div class="round_div">
<button class="btn_outter"> button </button>
</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

关于css - 如何使圆形渐变边框变为按钮而不是正方形？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56303557/