CSS SVG/CSS 虚线两色边框 – 是否可能

在本文中，我们将介绍如何使用CSS和SVG来创建一个具有两种颜色的虚线边框。

阅读更多：CSS 教程

SVG 和 stroke-dasharray 属性

SVG (可缩放矢量图形) 是一种使用XML定义图形的语言，可以通过CSS样式表来渲染。SVG提供了一种创建矢量形状的方式，包括线条和边框。

在SVG中，可以使用stroke-dasharray属性来创建虚线效果。该属性接受一个值列表，指定了虚线和间隔的长度。例如，stroke-dasharray: 5 5将创建一个虚线，每个虚线段的长度为5像素，间隔也为5像素。

创建两色虚线边框

要创建两个不同颜色的虚线边框，我们可以使用CSS的linear-gradient()函数来定义边框的颜色。linear-gradient()函数可以创建一个颜色渐变，我们可以通过background-image或border-image属性将其应用到元素上。

.dashed-border {
  width: 200px;
  height: 200px;
  border: 5px dashed;
  background-image: linear-gradient(to right, red 50%, blue 50%);
}

在上面的示例中，我们定义了一个名为dashed-border的类，将其应用到一个200×200像素的元素上。我们使用了border属性来创建一个虚线边框，边框宽度为5像素，并且使用了dashed样式。然后，我们使用linear-gradient()函数创建一个颜色渐变，从左侧50%的位置开始是红色，从右侧50%的位置开始是蓝色。这样就实现了一个由红色和蓝色组成的虚线边框。

创建两色实线边框

如果我们想要创建一个由两种颜色的实线组成的边框，可以使用border-image属性。border-image属性可以将一个图像作为边框应用到元素上。

.solid-border {
  width: 200px;
  height: 200px;
  border: 5px solid transparent;
  border-image: linear-gradient(to right, red 50%, blue 50%) 1;
}

在上面的示例中，我们定义了一个名为solid-border的类，并将其应用到一个200×200像素的元素上。我们使用了border属性来创建一个透明的实线边框，边框宽度为5像素。然后，我们使用linear-gradient()函数创建一个颜色渐变，并将其作为边框图像应用到元素上。最后一个参数1表示将颜色渐变重复一次，这样就实现了一个由红色和蓝色组成的实线边框。

使用SVG创建两色虚线边框

除了使用CSS属性，我们还可以使用SVG来创建两种颜色的虚线边框。

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="200" height="200" stroke="url(#gradient)" stroke-width="5" fill="none" />
  <defs>
    <linearGradient id="gradient">
      <stop offset="50%" stop-color="red" />
      <stop offset="50%" stop-color="blue" />
    </linearGradient>
  </defs>
</svg>

在上面的示例中，我们使用了一个<rect>元素来创建一个矩形，并通过stroke属性定义了矩形的边框颜色。我们使用了一个<linearGradient>元素来创建一个颜色渐变，并将其命名为gradient。然后，我们通过在<rect>元素的stroke属性中引用这个渐变，来实现一个由红色和蓝色组成的虚线边框。