css - 如何为按钮而不是方形制作圆形渐变边框?

标签 css linear-gradients

<分区>

请有人指导我如何将线性渐变 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/

上一篇:html - 我需要帮助将文本居中放置在 CSS 网格的中心

下一篇:php - 如何 jQuery toggle() 和隐藏切换链接或按钮?

相关文章:

javascript - 如何仅在 bootstrap tagsinput 中接受字母

css - 是否可以删除后续文件中的 CSS 样式?

css - 现有按钮的循环渐变效果

html - 导航中的线性渐变不显示

css - 显示 : block; does not fix overlap

jquery - 计算(百分比)计算(像素)

html - HTML 中 <a> 标签上的文本垂直居中

android-studio - android studio - 径向渐变不适用于手机

html - 位置 :relative breaking background-clip: text

c++ - C++ 中的两个颜色线性渐变 .ppm 文件