CSS，有3种颜色的边框可以吗？

Question

CSS可能在同一行中具有三种颜色的边框吗？我已经用图像做到了，但是我试图学习如何仅使用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

您可以像上面提到的@Adrift一样使用box-shadow通过纯CSS实现此效果。您只能使用实体的边框类型。请确保检查浏览器是否支持盒子阴影。请注意如何使用逗号。

.border {
    box-shadow : 0 -5px 0 red,
                 0 -10px 0 blue,
                 0 -15px 0 yellow;
}

另一种选择是使用边框图像。

Answer 2

您也可以使用background-gradient，就像图像一样：（也许重复看看 是否可以每75像素更改边框的颜色？）

在这里可能是：

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