3.4 (案例)border-colors

作者: 柒月柒日晴7 | 来源:发表于2017-06-07 23:05 被阅读0次

3.4 (案例)border-colors
第3.4章：TodoList案例优化
如何在列表，字典，集合中根据条件筛选数据
Vue学习笔记之三
HCI 笔记 | Week 04 Design Alternat
查询优化
成都精品酒店设计公司案例_【凯斯特装饰】
何以解忧，唯有美食
2022年第三书《父母：挑战》——鲁道夫·德雷克斯（阿德勒）
zabbix介绍

border-colors.png

border-color.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            border:5px solid;
            -moz-border-top-colors:#000 #000 #fff #fff #000 #000 #fff #fff #000 #000 ;
            -moz-border-bottom-colors:#000 #000 #fff #fff #000 #000 #fff #fff #000 #000;
            -moz-border-left-colors:#000 #000 #fff #fff #000 #000 #fff #fff #000 #000;
            -moz-border-right-colors:#000 #000 #fff #fff #000 #000 #fff #fff #000 #000;
            /*border-radius: 150px;*/
        }

        .box2{
            width: 300px;
            height: 300px;
            border:5px solid;
            -moz-border-top-colors:red red yellow yellow pink pink green green blue blue;
            -moz-border-bottom-colors:red red yellow yellow pink pink green green blue blue;
            -moz-border-left-colors:red red yellow yellow pink pink green green blue blue;
            -moz-border-right-colors:red red yellow yellow pink pink green green blue blue;
            border-radius: 150px;
        }
        .box3{
/*          border-width:10px;
            border-style: solid;*/
            width: 200px;
            height: 200px;
            border-radius:50%;
        /*  /*border-color: red;*/
            /*border-colors: -webkit-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);*/*/
            background: -webkit-linear-gradient(red 0%, yellow 100%);
    /*      padding: 10px;*/
            /*background: red;*/
        }
        .box4{
            width: 180px;
            height: 180px;
            border-radius:50%;
            background: #ccc;
            margin: 10px;
            float: left;
        }
        #yuan{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- 斑马纹的制作，对border-colors 4个方向分别设置，一个颜色值代表一像素 -->
    <!-- 只有火狐兼容。。 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="box4">
            
        </div> 
    </div>                                            
    <canvas id='yuan' width='200' height='200'></canvas>
    <script type="text/javascript">
     var canvas = document.getElementById('yuan').getContext('2d');
     var gradient = canvas.createLinearGradient(0,0,0,200);
     gradient.addColorStop(0,'red');
     gradient.addColorStop(0.7,'yellow');
 canvas.beginPath(); 
 canvas.arc(100,100,90,0,2*Math.PI); 
 canvas.strokeStyle=gradient; 
 canvas.lineWidth=10; 
 canvas.stroke(); 
 canvas.closePath(); 
 canvas.beginPath(); 
 canvas.arc(100,100,80,0,2*Math.PI); 
 canvas.strokeStyle='#0f0'; 
 canvas.lineWidth=10; 
 canvas.stroke(); 
 canvas.closePath(); 
    </script>
</body>
</html>