• CSS3学习手记（5） 渐变

     CSS渐变

    • 线性渐变  沿着一根轴线改变颜色，从起点到终点进行顺序渐变
    • 径向渐变 

    线性渐变（默认从上到下）

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{background: linear-gradient(red,green);width: 100px;height: 100px;}
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    从左到右

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(to left,red,green)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    对角

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(to left bottom,red,green)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    线性渐变使用角度

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(45deg,red,green)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    颜色节点控制

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(45deg,red 30%,green 40%, yellow 20%)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    透明渐变

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background: linear-gradient(90deg,rgba(255, 0, 0, 0),rgba(255, 0, 0, .3),rgba(255, 0, 0, 1))
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    重复渐变

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background:repeating-linear-gradient(90deg,red 0%,blue 20%)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    径向渐变

    从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background:radial-gradient(red,blue)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    颜色不均匀分布

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
       div{
           width: 100px;height: 100px;
          background:radial-gradient(red 50%,blue 70%)
       }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

    设置形状 默认椭圆（ellipse） circle(圆形)

    重复径向渐变 略

    径向渐变-尺寸大小关键字

    • closest-side    最近边
    • farthest-side   最远边
    • closest-corner  最近角
    • farthest-corner  最远角
  • 相关阅读:
    使用select和shutdown
    SMTP协议初探（二）linux下c编程实现发邮件
    ortp使用详解 ortprelease.pdf
    网易校园招聘c++题目如何让new操作符不分配内存，只调用构造函数
    虚拟地址空间，堆栈，堆，数据段，代码段
    关于double的输入输出
    CodeForces1238DABstring CodeForces思维+字符串反向思考
    CodeForces1234CPipesdfs
    CodeForces1221A2048 Game思维题
    排序
  • 原文地址：https://www.cnblogs.com/zry2510/p/7081366.html
Copyright © 2020-2023  润新知