使用 border-image 创建多色边框

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

上面的例子将产生一个由 5 种不同颜色组成的边框。颜色是通过 linear-gradient 定义的（你可以在文档中找到有关渐变的更多信息 ）。你可以在同一页面的 border-image 示例中找到有关 border-image-slice 属性的更多信息。

（ 注意：为了表示目的，已将附加属性添加到元素中。 ）

你已经注意到左边框只有一种颜色（渐变的起始颜色），而右边框也只有一种颜色（渐变的结束颜色）。这是因为边框图像属性的工作方式。就好像将渐变应用于整个框，然后从填充和内容区域中遮盖颜色，从而使其看起来好像只有边框具有渐变。

哪个边框具有单一颜色取决于渐变定义。如果渐变是 to right 渐变，则左边框将是渐变的起始颜色，右边框将是最终颜色。如果它是 to bottom 渐变，则顶部边框将是渐变的开始颜色，而底部边框将是最终颜色。以下是 to bottom 5 彩色渐变的输出。

如果仅在元素的特定边上需要边框，则可以使用 border-width 属性，就像使用任何其他正常边框一样。例如，添加以下代码将仅在元素的顶部生成边框。

border-width: 5px 0px 0px 0px;

请注意，任何具有 border-image 属性的元素都不会尊重 border-radius（即边框不会弯曲）。这是基于规范中的以下声明：

框的背景，但不是其边框图像，被剪切到适当的曲线（由’background-clip’确定）。