CSS 渐变


1.线性渐变

  • 多个颜色之间的渐变，默认从上到下渐变。

    • background-image:linear-gradient( , , );

  • 使用关键词设置线性渐变的方向。

    • background-image:linear-gradient(to top, , , );
    background-image:linear-gradient(to right top, , , );

  • 使用角度设置线性2.渐变的方向。

    • background-imge:linear-gradient(30deg, , , );

  • 调整开始渐变的位置。

    • background-imge:linear-gradient(red 50px, , , );

    3.径向渐变

  • 使用像素值值调整渐变圆的圆心位置。

    • background-image:radial-gradient(at 100px 50px, , , );

  • 调整渐变形状为正圆。

    • background-image:radial-gradient(circle, , , );

  • 调整形状的半径
    • 。

    background-image:radial-gradient(100px, , , );
    background-image:radial-gradient(50px,100px, , , );

    4.重复渐变

    在渐变类型前面加上 repeating

    web 字体

    基本用法

    1
    2
    3
    4
    5
    @font-face{
         font-family:"";
         font-display:swap;
         src:url(./  );
    }