先上效果图
<!DOCMENT HTML>
<html>
<head>
<style>
.wrap {
width: 300px;
height: 50px;
border-top: 30px solid #ccc;
border-image: -webkit-linear-gradient( #ff0000, #175dff) 60 30;
border-image: -moz-linear-gradient( #ff0000, #175dff) 60 30;
border-image: linear-gradient( #ff0000 , #175dff) 60 30;
}
.view{
height: 100px;
width: 100px;
border: 10px solid #fff;
border-color: #ff1c17 #09800c #156bff #3fff41;
}
</style>
</head>
<body>
<div class="wrap"></div>
<div class="view"></div>
</body>
</html>
注意:border的边框颜色设置是从外向内的,所以第一个颜色编码是最外层颜色,最后一个颜色编码是最内层的颜色。
应该很喜欢这种直接把全文代码贴上的吧,方便复制哈