zoukankan      html  css  js  c++  java
  • 渐变背景

    html

    <div class="backcolor">
        <div class="color1"></div>
        <div class="color2"></div>
        <div class="color3"></div>
        <div class="color4"></div>
        <div class="color5"></div>
        <div class="color6"></div>
        <div class="color7"></div>
        <div class="color8"></div>
    </div>
    

    css

        div.backcolor .color1{
            margin: 0 10px;
             200px;
            height: 200px;
            border:1px solid red;
            background-image: linear-gradient(45deg,red,blue,yellow); //线性渐变
        }
        div.backcolor .color2{
            margin: 0 10px;
             200px;
            height: 200px;
            border:1px solid red;
            background-image: linear-gradient(135deg,red 25%,yellow 39%,blue);
        }
        div.backcolor .color3{
            margin: 0 10px;
             200px;
            height: 200px;
            border:1px solid red;
            background-image: radial-gradient(farthest-corner,red,yellow,white);//经向渐变
        }
        div.backcolor .color4{
            margin: 0 10px;
             200px;
            height: 200px;
            border:1px solid red;
            background-image: radial-gradient(closest-corner,blue,yellow,red);
        }
        div.backcolor .color5{
            margin: 0 10px;
             200px;
            height: 200px;
            border:1px solid red;
            /*background-repeat: no-repeat;*/
          //重复线性渐变
            background-image: -webkit-repeating-linear-gradient(45deg,red 5%,yellow 10%,blue 15%);
        }
        div.backcolor .color6{
            margin: 0 10px;
             200px;
            height: 200px;
            border:1px solid red;
            background-image: -webkit-repeating-linear-gradient(135deg,red 0px,red 10px,yellow 10px,yellow 20px,blue 20px,blue 30px);
        }
        div.backcolor .color7{
            margin: 0 10px;
             200px;
            height: 200px;
            border:1px solid red;
      //重复径向渐变
            background-image: -webkit-radial-gradient(bottom right, circle, red, yellow, blue);
        }
        div.backcolor .color8{
            margin: 0 10px;
             200px;
            height: 200px;
            border:1px solid blue;
            background-size: 40px 40px;
            background-image: linear-gradient(45deg,red 25%,transparent 25%,transparent 75%,red 75%),
            linear-gradient(135deg,red 25%,transparent 25%,transparent 75%,red 75%);
        }
    

  • 相关阅读:
    UICollectionView 布局
    ios 调用支付宝
    iOS POST 上传图片
    ios 判断字符串是否为空
    让写代码成为每天的习惯
    gocron_跨平台定时任务管理器
    monkey做安卓APP的黑盒自动化测试
    Android自动化测试框架分析
    联合查询中where 和and的区别
    JIRA中导出BUG列表是CSV格式的,打开后是乱码
  • 原文地址:https://www.cnblogs.com/xyyl/p/11215817.html
Copyright © 2011-2022 走看看