zoukankan      html  css  js  c++  java
  • html5-css渐变色

    div{
         300px;
        height: 100px;
        margin: 50px;
        padding: 50px;
        border:5px groove rgba(200,60,30,0.8);
    }
    #div1{
        background-image: linear-gradient(red,blue);
    }
    #div2{
        background-image: linear-gradient(to right,red,blue);
    }
    #div3{
        background-image: linear-gradient(to right bottom,red,blue);
    }
    #div4{
        background-image: linear-gradient(60deg,red,blue);
    }
    #div5{
        background-image: linear-gradient(red,blue,orange,green);
    }
    #div6{
        background-image: linear-gradient(60deg,red 10%,blue 30%,orange 60%,green 80%);
    }
    #div7{
        background-image: linear-gradient(60deg,red 10px,blue 30px,orange 60px,green 300px);
    }
    #div8{
        /*background: linear-gradient(60deg,orange 20px,red 40px);*/
    background: repeating-linear-gradient(60deg,orange 20px,red 40px);
    }

    #div9{        
        background: radial-gradient(red,blue,green);
    }
    #div10{
        background: radial-gradient(circle,red,blue,orange);
    }
    #div11{
        background: radial-gradient(circle at right,red,blue,orange);
    }
    #div12{
        background: radial-gradient(circle at right top,red,blue,orange);
    }
    #div13{
        background: radial-gradient(circle 50px,red,blue,orange);
    }
    #div14{
        background: radial-gradient(circle closest-side,red,blue,orange);
    }
    #div15{
        background: radial-gradient(circle farthest-side,red,blue,orange);
    }
    #div16{
        background: radial-gradient(circle closest-corner,red,blue,orange);
    }
    #div17{
        background: radial-gradient(circle farthest-corner,red,blue,orange);
    }
    #div18{
        background:repeating-radial-gradient(circle 5px,red,orange);
    }

    天道酬勤,厚积薄发。 君子之行,静以修身,俭以养德。 非淡泊无以明志,非宁静无以致远。 如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。
  • 相关阅读:
    生成doc
    Struts2 配置
    Struts(一)struts2.2概述与MVC模式深度剖析
    [DOM Event Learning] Section 4 事件分发和DOM事件流
    jquery 高亮显示案例
    jquery 下拉菜单
    3_1:操作样式
    2_2:筛选器
    2_1:选择元素
    本地存储小案例:记住用户名
  • 原文地址:https://www.cnblogs.com/houweidong/p/7795063.html
Copyright © 2011-2022 走看看