html - CSS，border-top 有 3 种颜色，可能吗？

Question

css 可以在同一行中使用三种颜色设置 border-top 吗？我已经用图像做到了，但我试图学习如何只用 css 来做同样的效果，但我没有成功。

我的边框 html:

<div class="border">
</div>

我在 css 中尝试但没有成功:

.border {
            border-top: 3px solid red;
            position: relative; }    

.border:after {
        position: absolute;
        left: 25%;
        border-top: 3px solid blue;}

Answer 1

你也可以使用 background-gradient 太像图像了:(也许是重复的，请参阅 Is it possible to change the color of a border every 75px? )

这里可能是:

element {
   background:
     linear-gradient(
       to left,
       red 0, 
       red 33.3%,
       orange 33.3%, 
       orange 66.6%, 
       blue 66.6%, 
       blue )no-repeat;
   background-size:100% 3px ;
   padding-top:3px;
 }

http://codepen.io/anon/pen/lAsvw