6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

css笔记07-css 渐变色/字体图标

2022-04-24 0 38 web前端社区

6.jpg 0 前端程序猿

渐变色

CSS 中的渐变指的是两种或多种颜色之间的平滑过渡，以前我们必须使用事先定义好的图像来实现渐变效果，在 CSS3 出现以后则简单了很多，CSS3 为实现渐变效果提供了一种灵活的解决方案。

通过 CSS3 您可以定义三种类型的渐变，分别为线性渐变（通过 linear-gradient() 函数创建）、径向渐变（通过 radial-gradient() 函数创建）和圆锥渐变（通过 conic-gradient() 函数创建）。

通过 CSS 创建的渐变不仅简单灵活，而且还省去了使用图像时所需的加载过程，节省了网页的加载时间。

通过 CSS 创建的渐变元素可以按任意比例放大或缩小，而且不会降低质量。

1. 线性渐变

线性渐变指的是颜色沿一条直线进行渐变（例如右上到下，从左到右等），要创建线性渐变，您至少需要定义两个色标（色标指的是想要平滑过渡的颜色），若要创建更加复杂的渐变效果，则需要定义更多的色标。创建线性渐变的基本语法如下：

linear-gradient(direction, color-stop1, color-stop2, …);

参数说明如下：

  • direction 可选值，定义渐变的方向（例如从左到右，从上到下），可以是具体角度（例如 90deg），也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向，例如：
    • to left：表示从右到左，相当于 270deg；
    • to right：表示从左到右，相当于 90deg；
    • to top：表示从下到上，相当于 0deg；
    • to bottom：默认值，表示从上到下，相当于 180deg；
    • to right bottom：表示从左上到右下；
    • to right top：表示从左下到右上；
    • to left bottom：表示从右上到左下；
    • to left top：表示从右下到左上。
  • color-stop1、color-stop2、…：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比的形式定义颜色的起止位置。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             width: 210px;
  7.             height: 50px;
  8.             float: left;
  9.             margin: 10px;
  10.         }
  11.         .one {
  12.             background: linear-gradient(to right bottom, red, blue 70px);
  13.         }
  14.         .two {
  15.             background: linear-gradient(190deg, #000, #FFF);
  16.         }
  17.         .three {
  18.             background: linear-gradient(red, green, blue);
  19.         }
  20.         .four {
  21.             background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="one"></div>
  27.     <div class="two"></div>
  28.     <div class="three"></div>
  29.     <div class="four"></div>
  30. </body>
  31. </html>

2. 径向渐变

径向渐变与线性渐变类型，不同之处在于径向渐变是由中心向外延申的渐变，您可以指定中心点的位置，也可以设置渐变的形状。定义径向渐变的基本语法如下所示：

radial-gradient(shape size at position, color-stop1, color-stop2, …);

参数说明如下：

  • at：一个关键字，需要放置在参数 position 的前面；
  • position：指定渐变起点的坐标，您可以使用数值加单位、百分比或者关键字（例如 left、bottom 等）等形式指定渐变起点的坐标，如果提供 2 个参数，那么第一个参数用来表示横坐标，第二个参数用来表示纵坐标，如果只提供一个参数，那么第二个参数将被默认设置为 50%，即 center；
  • shape：指定渐变的形状，可选值为 circle（圆形）、ellipse（椭圆）；
  • size：指定渐变形状的大小，除了可以使用具体的数值来指定 circle、ellipse 的半径外，还可以使用下面所示的关键字来指定渐变形状的大小：
    • closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
    • closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
    • farthest-side：默认值，指定径向渐变的半径长度为从圆心到离圆心最远的边；
    • farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。
  • color-stop1、color-stop2、…：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比的形式定义颜色的起止位置。：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             width: 210px;
  7.             height: 100px;
  8.             float: left;
  9.             margin: 10px;
  10.             border: 1px solid black;
  11.         }
  12.         .one {
  13.             background: radial-gradient(circle at 50%, red, yellow, lime);
  14.         }
  15.         .two {
  16.             background: radial-gradient(ellipse 100px 30px at 30%, red, yellow, lime);
  17.         }
  18.         .three {
  19.             background: radial-gradient(circle 100px at 50%, red 10%, yellow 50%, lime 100px);
  20.         }
  21.         .four {
  22.             background: radial-gradient(circle closest-corner at 50px 30px, red, yellow, lime);
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="one"></div>
  28.     <div class="two"></div>
  29.     <div class="three"></div>
  30.     <div class="four"></div>
  31. </body>
  32. </html>

3. 圆锥渐变

圆锥渐变类似于径向渐变，两者都有一个中心点作为色标的源点，不同的是圆锥渐变是围绕中心点旋转（而不是从中心点向往辐射），定义圆锥渐变的基本语法如下：

conic-gradient(from angle at position, start-color, …, last-color);

语法说明如下：

  • from：一个关键字，需要放置在参数 angle 之前；
  • angle：定义圆锥渐变的起始角度，可以为空，默认值为 0deg；
  • at：一个关键字，需要放置在参数 position 之前；
  • position：定义圆锥渐变锥心的坐标，您可以使用数值加单位、百分比或者关键字（例如 left、bottom 等）等形式指定锥心的坐标，如果提供 2 个参数，那么第一个参数用来表示横坐标，第二个参数用来表示纵坐标，如果只提供一个参数，那么第二个参数将被默认设置为 50%，即 center（居中）；
  • start-color、…、last-color：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过百分比或者角度来定义颜色的起始位置。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             width: 210px;
  7.             height: 100px;
  8.             float: left;
  9.             margin: 10px;
  10.             border: 1px solid black;
  11.         }
  12.         .one {
  13.             background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
  14.         }
  15.        .two {
  16.             background: conic-gradient(red 0deg 30deg, orange 30deg 50deg, yellow 50deg 200deg, green 200deg 300deg, blue 300deg 360deg);
  17.         }
  18.         .three {
  19.             background: conic-gradient(from 90deg, red 0% 55%, yellow 55% 90%, lime 90% 100%);
  20.         }
  21.         .four {
  22.             background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="one"></div>
  28.     <div class="two"></div>
  29.     <div class="three"></div>
  30.     <div class="four"></div>
  31. </body>
  32. </html>

4. 重复渐变

在 CSS 中，您还可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 等函数来分别创建线性渐变、径向渐变和圆锥渐变的重复渐变，所谓重复渐变就是指将渐变的过程重复多次，以铺满整个元素。

repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函数的语法分别与 linear-gradient()、radial-gradient() 和 conic-gradient() 函数的语法相同。

如:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         div {
  6.             width: 210px;
  7.             height: 100px;
  8.             float: left;
  9.             margin: 10px;
  10.             border: 1px solid black;
  11.         }
  12.         .one {
  13.             background: repeating-linear-gradient(190deg, #000 0px 10px, #FFF 10px 20px);
  14.         }
  15.        .two {
  16.             background: repeating-radial-gradient(circle 100px at 50%, red 0% 10%, yellow 10% 30%, lime 30% 40%);
  17.         }
  18.         .three {
  19.             background: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
  20.         }
  21.         .four {
  22.             background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="one"></div>
  28.     <div class="two"></div>
  29.     <div class="three"></div>
  30.     <div class="four"></div>
  31. </body>
  32. </html>

字体图标

1.字体图标可以做透明、旋转等图片可以做的事情；

2.本质是文字，可以很随意改变颜色、产生阴影、透明效果；

3.本身体积小，携带的信息没有削减；

4.几乎支持所有浏览器；

5.移动设备必备；

字体图标，把图标当做字体控制，可以像字体一样改变颜色大小等等。
一般用阿里巴巴字体图标库 https://www.iconfont.cn/。

  1. 注册账号并登录
  2. 搜索图标，点添加入库
  3. 把图标添加到项目(如果没有项目要新建一个项目)
  4. 引入字体图标样式文件,应用相关图标的类

    像素图片和svg图片

    像素图片—图片放大后像素点也会变大，会影响图片清晰度。
    svg 矢量图(可缩放图像)，使用XML格式定义图像。用xml标记语言创建图像。
    上传字体图标是就是上传图标的svg文件。
    在线svg文件编辑:http://svg.wxeditor.com
0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3