zoukankan      html  css  js  c++  java

  • 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  最远角
  • 相关阅读:
    STM32CubeIDE+FreeRTOS软件定时器实验
    STM32CubeIDE+FreeRTOS事件实验
    STM32CubeIDE+FreeRTOS互斥量实验
    STM32CubeIDE+FreeRTOS模拟优先级反转实验
    STM32CubeIDE+FreeRTOS计数信号量实验
    STM32CubeIDE+FreeRTOS二值信号量实验
    数据库
    并发编程
    网络编程
    面向对象编程（高阶）
  • 原文地址：https://www.cnblogs.com/zry2510/p/7081366.html
Copyright © 2011-2022 走看看