美文网首页
css学习日志 linear-gradient渐变

css学习日志 linear-gradient渐变

作者: smallzip | 来源:发表于2019-08-13 17:13 被阅读0次

    css学习日志:

    1.linear-gradient的使用,制作徽章,或者箭头

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>linear-gradient</title>
      <style>
        .container {
          flex: 1;
          width: 100px;
          height: 500px;
          background: #580;
          background:
            linear-gradient(45deg, transparent 50px, #580 0) top right,
            linear-gradient(-45deg, transparent 50px, #580 0) top left,
            linear-gradient(-45deg, transparent 50px, #580 0) bottom right,
            linear-gradient(45deg, transparent 50px, #580 0) bottom left;
          background-repeat: no-repeat;
          background-size: 50% 50%;
        }
      </style>
    </head>
    
    <body>
      <div class="container">
      </div>
    </body>
    
    </html>
    

    效果:


    徽章和箭头

    2.中心三角形

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          flex: 1;
          /* column-gap: 20px;
          column-count: 3; */
          width: 500px;
          height: 500px;
    
          background: #580;
          background:
            linear-gradient(45deg, transparent 50px, #580 0) top right,
            linear-gradient(-45deg, transparent 50px, #580 0) top left,
            linear-gradient(-45deg, transparent 50px, #580 0) bottom right,
            linear-gradient(45deg, transparent 50px, #580 0) bottom left;
          background-repeat: no-repeat;
          background-size: 50% 50%;
        }
      </style>
    </head>
    
    <body>
      <div class="container">
      </div>
    </body>
    
    </html>
    

    效果:


    中心三角形

    3.色调渐变

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          flex: 1;
          width: 500px;
          height: 500px;
          border-radius: 50%;
          background: conic-gradient(red, yellow,lime,aqua,blue,fuchsia,red);
        }
      </style>
    </head>
    
    <body>
      <div class="container">
       
      </div>
    </body>
    
    </html>
    

    效果:


    微信截图_20190813154650.png

    4.酒杯

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          flex: 1;
          width: 500px;
          height: 500px;
          background: #580;
          background:
            linear-gradient(135deg, transparent 50px, #580 0) top right,
            linear-gradient(-135deg, transparent 50px, #580 0) top left,
            linear-gradient(-45deg, transparent 50px, #580 0) bottom right,
            linear-gradient(45deg, transparent 50px, #580 0) bottom left;
          background-repeat: no-repeat;
          background-size: 50% 50%;
        }
      </style>
    </head>
    
    <body>
      <div class="container"> </div>
    </body>
    
    </html>
    

    效果:


    微信截图_20190813154822.png

    5.切四个角

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          flex: 1;
          width: 500px;
          height: 500px;
          background: #580;
          background:
            linear-gradient(-135deg, transparent 50px, #580 0) top right,
            linear-gradient(135deg, transparent 50px, #580 0) top left,
            linear-gradient(-45deg, transparent 50px, #580 0) bottom right,
            linear-gradient(45deg, transparent 50px, #580 0) bottom left;
          background-repeat: no-repeat;
          background-size: 50% 50%;
        }
      </style>
    </head>
    
    <body>
      <div class="container"> </div>
    </body>
    
    </html>
    

    效果:


    微信截图_20190813155036.png

    6.棋盘

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          column-gap: 20px;
          column-count: 3;
          background: #eee;
          background-image:
            linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0),
            linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0);
          background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
          background-size: 30px 30px;
        }
      </style>
    </head>
    
    <body>
      <div class="container">
        <h1>Simple multicol example</h1>
    
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
          vulputate.
          Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
          laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
          egestas ligula.
          Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
          Suspendisse
          ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
          blandit
          quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
    
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
          sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
          tristique
          elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
          velit
          cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et
          magnis
          dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </body>
    
    </html>
    

    效果:


    微信截图_20190813155354.png

    7.切角

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          column-gap: 20px;
          column-count: 3;
          background: #eee;
          background-image:
            linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0),
            linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0);
          background-size: 30px 30px;
        }
      </style>
    </head>
    
    <body>
      <div class="container">
        <h1>Simple multicol example</h1>
    
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
          vulputate.
          Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
          laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
          egestas ligula.
          Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
          Suspendisse
          ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
          blandit
          quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
    
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
          sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
          tristique
          elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
          velit
          cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et
          magnis
          dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </body>
    
    </html>
    

    效果:


    微信截图_20190813155554.png

    8.点

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          column-gap: 20px;
          column-count: 3;
          background: #eee;
          background-image: radial-gradient(tan 30%, transparent 0);
          background-size: 30px 30px;
        }
      </style>
    </head>
    
    <body>
      <div class="container">
        <h1>Simple multicol example</h1>
    
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
          vulputate.
          Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
          laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
          egestas ligula.
          Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
          Suspendisse
          ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
          blandit
          quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
    
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
          sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
          tristique
          elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
          velit
          cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et
          magnis
          dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </body>
    
    </html>
    

    效果:


    微信截图_20190813155807.png

    9.半切渐变

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          column-gap: 20px;
          column-count: 3;
          background: repeating-linear-gradient(45deg,#fb3, #58a 10%);
        }
      </style>
    </head>
    
    <body>
      <div class="container">
        <h1>Simple multicol example</h1>
    
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
          vulputate.
          Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
          laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
          egestas ligula.
          Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
          Suspendisse
          ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
          blandit
          quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
    
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
          sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
          tristique
          elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
          velit
          cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et
          magnis
          dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </body>
    
    </html>
    

    效果:


    微信截图_20190813155933.png

    10.svg

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>svg</title>
      <style>
        .container {
          flex: 1;
          height: 800px;
          display: flex;
          justify-content: center;
          align-items:center;
        }
    
        circle {
          fill: yellowgreen;
          stroke: #655;
          stroke-width: 100;
          stroke-dasharray: 20 10;
        }
      </style>
    </head>
    
    <body>
      <div class="container">
        <svg width="1000" height="800">
          <circle r="200" cx="250" cy="250"></circle>
        </svg>
      </div>
    </body>
    
    </html>
    

    效果:


    3.gif
    1. 弧形切角
    `<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Flexbox wrap 0 — children overflowing</title>
      <style>
        .container {
          flex: 1;
          width: 500px;
          height: 500px;
          border-radius: 50%;
          background: conic-gradient(red, yellow,lime,aqua,blue,fuchsia,red);
        }
      </style>
    </head>
    
    <body>
      <div class="container">
       
      </div>
    </body>
    
    </html>
    

    效果:


    内切

    相关文章

      网友评论

          本文标题:css学习日志 linear-gradient渐变

          本文链接:https://www.haomeiwen.com/subject/mqkbjctx.html