具有多种颜色的 html5/css3 自定义形状按钮答案

【问题标题】：html5/css3 custom shape button with multiple colors具有多种颜色的 html5/css3 自定义形状按钮
【发布时间】：2016-01-06 16:51:45
【问题描述】：

我需要有关附加按钮 css 的帮助。任何人都可以帮我做css或指导我吗？

【问题讨论】：

你有没有尝试过或搜索过什么？
不，我正在搜索。你有这样的想法吗？
检查：hongkiat.com/blog/css-gradient-border

标签： html css svg

【解决方案1】：

您可以在 SVG 中使用 mask 和 linearGradient 的组合作为 CSS 背景图像来实现这样的效果。

它是这样工作的

您可以在 SVG 中使用 100% 的宽度和高度。但不幸的是，笔触延伸到形状之外，所以如果你抚摸你的 100% 矩形，那么笔触就会部分地超出你的视口。那看起来不太好。诀窍是有第二个矩形作为第一个矩形的遮罩，它的笔画宽度略小，有效地切除了原本会在视口之外的部分。现在你可以用渐变来描边矩形来得到你想要的结果。

<svg xmlns="http://www.w3.org/2000/svg">
  <linearGradient x1="0" y1="1" x2="1" y2="1" id="lg1">
    <stop offset="0" stop-color="red" />
    <stop offset="0.2" stop-color="red" />
    <stop offset="0.2" stop-color="blue" />
    <stop offset="0.8" stop-color="blue" />
    <stop offset="0.8" stop-color="green" />
    <stop offset="1" stop-color="green" />
  </linearGradient>

  <mask id="m1">
    <rect x="0" y="0" width="100%" height="100%" rx="40" ry="40" fill="white" stroke="black" stroke-width="20" />
  </mask>

  <rect stroke="url(#lg1)" stroke-width="40" mask="url(#m1)" x="0" y="0" width="100%" height="100%" rx="40" ry="40" fill="none" />

</svg>

【讨论】：

感谢您的回答，但我们可以创建一个像图片中显示的过滤器按钮这样的按钮吗？
如我所说，使用上面的图片作为css中的背景图片