渐变色border

这个渐变色border要涉及很多css3中新增加的background属性，现在一一介绍下。

一.多重背景

这里需要设置多重背景，每個設定的背景被一個個分层，第一個背景在最上面，最後一個背景是在最下面一层。记得只有最后一个背景可以设置background-color.
eg:

.bg{
background:1,//第一层
background:2,
...
background:N;//最后一层
}

二.background-origin

规定background-position 属性相对于什么位置来定位。
有三个属性值：
border-box（忽略border，即会覆盖border的位置）
padding-box（忽略padding，即会覆盖padding的位置，不会覆盖border）
content-box（只显示在content中，不会覆盖border和padding）

三、background-clip

规定背景的绘制区域，即裁剪，通常与background-origin一起 使用
也是三个属性值：
border-box（忽略border，即会覆盖border的位置）
padding-box（忽略padding，即会覆盖padding的位置，不会覆盖border）
content-box（只显示在content中，不会覆盖border和padding）

那么结合这些属性起来就可以实现渐变色border了。

.box{
    width: 200px;
    height: 200px;
    background-clip:padding-box,border-box;
        background-origin:padding-box,border-box;
        background-image:linear-gradient(180deg,#000,#000),linear-gradient(180deg,red,yellow);
        border:8px transparent solid;
    }
            

image.png