具有多种颜色的边框颜色

Question

我找到了一些关于border-color 的信息，结果证明，您可以为每个边框指定不同的颜色。我的问题如下：是否可以用两种或多种颜色指定左边框？ 交易是，我有一个导航栏，带有li 元素，这些元素由padding 和border 属性划分。例如：

li {
    float: left;
    padding-left&right: 10px;
    border-left: 2px solid white;
}

并且边框与li 元素中的文本本身一样高。我需要的是让边框比文本短。所以我想我可以给它 3 种颜色：透明 - 白色 - 透明。

也许有一种现实的方法可以做到这一点？这只是在我的脑海中，我发现了信息，不可能将边框缩短到 li 元素的高度以下。

Answer 1

实现这一点的最合适方法是利用 border-image 属性以及 Stephen Brickner 的回答中提到的线性渐变。但它的缺点是browser support 目前非常低。

还有一些其他方法可以提供比可以使用更好的浏览器支持，它们如下：

方法一：带边框的伪元素

您可以使用高度小于父li 元素的伪元素（:before 或:after），添加border 并对其进行适当定位以达到所需的效果。分隔线的粗细由伪元素边框的宽度决定。

.right-to-left {
  position: relative;
  float: left;
  width: 150px;
  padding: 0px 10px;
}
.right-to-left:after {
  position: absolute;
  content: '';
  right: 0px;
  height: 50%;
  top: 25%;
  border-right: 2px solid;
}

/* just for demo */

body {
  background: black;
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  color: white;
}

<div class="right-to-left">Some text <br/> and more</div>
<div class="right-to-left">Some text <br/> and more</div>
<div class="right-to-left">Some text <br/> and more</div>

此方法在可能的选项中包含highest browser support。但是，如果分隔符需要一种以上的颜色（或）需要渐变效果，则不能使用它。

---

方法二：背景渐变

您可以将linear-gradient 作为背景图像添加到元素并适当地放置它以生成比文本短的行。在这种方法中，分隔线的粗细由背景图像的宽度决定。

.right-to-left {
  width: 150px;
  float: left;
  padding: 0px 10px;
  background-image: linear-gradient(to bottom, transparent 25%, white 25%, white 75%, transparent 75%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: right top;
}
.right-to-left.multi {
  background-image: linear-gradient(to bottom, transparent 25%, red 25%, white 75%, transparent 75%);
}

/* just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  color: white;
}
hr{ clear: both; }
div{ margin: 10px 0px; }

<!-- prefix free library to support old browsers and avoid prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="right-to-left">Some text <br/> and more</div>
<div class="right-to-left">Some text <br/> and more</div>
<div class="right-to-left">Some text <br/> and more</div>

<hr>

<div class="right-to-left multi">Some text <br/> and more</div>
<div class="right-to-left multi">Some text <br/> and more</div>
<div class="right-to-left multi">Some text <br/> and more</div>

为此，browser support 优于 border-image 方法，但与伪元素方法相比更差。优点是分隔符可以有多种颜色，甚至是上面sn-p中的渐变图案。

Answer 2

您必须对其使用转换。示例：

.right-to-left {
    border-width: 3px 3px 3px 0;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; 
    -o-border-image:
      -o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%;     
}