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%);
        }
    

  • 相关阅读:
    UISearchBar的常用代理
    iOS 上传图片压缩大小设置
    __weak typeof(self)weakSelf = self;的解释和使用
    运动事件(MotionEvent)
    iOS 获取当前window
    保留小数
    ios 转图片
    iOS提示弹窗
    iOS 获取ip地址
    微信小程序 watch监听数据变化 类似vue中的watch
  • 原文地址:https://www.cnblogs.com/xyyl/p/11215817.html
Copyright © 2011-2022 走看看