Question

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

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

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

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

Answer 1

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

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

方法1：带边框的伪元素

您可以使用高度低于父:after元素的伪元素（li或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; }并定位它适当地达到要求的效果。分隔线的粗细由伪元素边界的宽度决定。

＆＃13;

<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>

＆＃13;

linear-gradient

＆＃13;

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

方法2：背景渐变

您可以将.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; }作为背景图像添加到元素中，并将其恰当地定位以生成比文本短的行。在这种方法中，分隔线的厚度由背景图像的宽度决定。

＆＃13;

<!-- 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>

＆＃13;

border-image

＆＃13;

此browser support优于df <- read.table(text ="YEAR Eucaris Niet.Eucaris 1 8 81867 0.1527756 2 9 91507 0.1533734 3 10 102755 0.1733875 4 11 116491 0.1648633 5 12 55133 0.1771800 6 13 67115 0.1449571", header =TRUE) library(scales) # For formatting y-axis graph <- ggplot(df, aes(x = YEAR, y=Eucaris)) + geom_line(linetype="dashed", size=1, colour="blue") + geom_point(size=4, shape=22, colour="darkred", fill="pink")+ scale_y_continuous(labels = comma)方法，但与伪元素方法相比更差。优点是分隔符可以有多种颜色，甚至可以像上面的代码段一样使用渐变图案。

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%;     
}

边框颜色有多种颜色

2 个答案:

方法1：带边框的伪元素

方法2：背景渐变