虽然这种方式也能实现多边框效果，但相比前两种解决方案而言要麻烦一些,来看一个简单示例：
CSS Code复制内容到剪贴板
border: 10px solid;
-moz-border-top-colors: red red red red green green green blue blue blue;
-moz-border-bottom-colors: red red red red green green green blue blue blue;
-moz-border-right-colors: red red red red green green green blue blue blue;
-moz-border-left-colors: red red red red green green green blue blue blue;
为了要实现三个颜色的多边框效果，red占4px，green占3px和blue点4px。需要大费周折。而且还不能直接写border-colors，因为浏览器不识别这样的属性。
除此之外，目前浏览器对这个属性支持度相当的弱。可以说，它只是Firefox的私有属性。
CSS透明边框
对 CSS 中的半透明颜色可能已经有了基础的了解，比如 rgba() 和 hsla()。从 2009 年开始，虽然在开发设计中使用它们需要付出一些代价，比如提供降级措施、使用IE滤镜，但是总得来说它是一个巨大的变革。不过在实际中，它们主要被用于背景，有这么几点原因：
早期的开发者没有意识到这些新属性就是类似 #ff0066 和 orange 的色彩，而是将它们看作是图片，所以仅用在了背景上。
为背景提供降级方案比其他属性更简单。比如，可以直接使用单像素的半透明图片替代半透明背景。对于其他属性，则只能使用不透明颜色。
在其他属性上使用半透明颜色，比如边框，并不简单，我们将在下文介绍原因。
图注：24ways.org 是第一个在设计中使用半透明颜色的网站，那时还是 2008 年，那时它们网站的特点就是使用了大量的背景（由 Tim Van Damme 设计）
假设我们想要美化一个容器，让它拥有一个白色的和半透明白色的边框——这个半透明边框可以让它后面的内容显示出来。我们要做的第一步就像是下面这样：
CSS Code复制内容到剪贴板
border: 10px solid hsla(0,0%,100%,.5);
background: white;
除非你非常了解background和border这两个属性的工作原理，否则上面代码得到的结果会让你感到非常的困惑。边框哪里去了呢？是不是不能为边框添加半透明颜色呢？到底该怎么做？
图注：第一次尝试实现半透明边框
解决方案
虽然看起来的效果和预期有所差异，其实边框是存在的。实际上，背景色默认会扩展到边框上，这一点可以通过给边框添加虚线观察到。如下图所示：
