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

  • 相关阅读:
    微软工具连接
    [转贴]生成缩略图
    突破验证,安装Media Player11.
    【转贴】Sourcecode and Code Snippets
    AppArch(一):User Interface
    【转】中国的OA要走的路还很长
    对WebService的在企业应用中的思考。
    [转贴]按文件类型获取其图标
    信息系统分析方法
    【转】WebService第一次调用正常,第二次调用超时的解决办法。
  • 原文地址:https://www.cnblogs.com/xyyl/p/11215817.html
Copyright © 2011-2022 走看看