css边框颜色渐变

先上效果图

css边框颜色渐变_第1张图片

<!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的边框颜色设置是从外向内的,所以第一个颜色编码是最外层颜色,最后一个颜色编码是最内层的颜色。

应该很喜欢这种直接把全文代码贴上的吧,方便复制哈

你可能感兴趣的:(css基础样式)