CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient

文章目录

前言
普通渐变
条纹
条纹重复
虚线
斜向条纹
三角形
进度条动画 progress
网格
圆点阵列
波点图案

前言

本文主要介绍linear-gradient的使用方法，既有普通的用法，也有高级用法，主要实现的功能有渐变、条纹、斜向条纹、网格、模拟虚线、progress进度条动画。看完本篇文章，相信你一定会有所收获
本文主要参考书籍【CSS揭秘】

普通渐变

-最常见的用法是从字面意思理解，实现一个渐变背景，如下图效果
background: linear-gradient(to right, #30e8bf, #ff8235);

条纹

调整色标位置，实现两个非渐变效果
background: linear-gradient(to right, #30e8bf 50%, #ff8235 50%);
参数解释，颜色后面跟一个百分比，表示当前颜色的过渡位置，如果前后两个颜色的过渡位置一样，则不会出现平滑渐变效果，而是突然变化

条纹重复

渐变背景除了铺满整个背景，还可以手动调整渐变尺寸, 通过设置background-size: 100% 50px，设置宽度方向100%铺满，竖向50px，此时单个背景色高度是25px，默认情况下是重复平铺整个背景，效果如下，

background: linear-gradient(to bottom, #30e8bf 50%, #ff8235 50%);
background-size: 100% 50px;

这里还有个缩写小技巧，如果后一个色标位置小于前一个色标的位置，则后一个色标位置会被它前面色标位置最大值替代，如上线三个不同颜色的条纹可以缩写成这样

      background: linear-gradient(to bottom,#30e8bf 33.3%,/* 这里的0，是缩写，相当于33.3% */#2a6b7e 0,#2a6b7e 66.6%,/* 这里的0，是缩写，相当于66.6% */#ff8235 0);background-size: 100% 50px;

虚线

搭配使用transparent可以实现虚线效果，在写法上有两种

      height: 1px;/* repeating写法和下面带background-size效果是一样的 *//* background-image: repeating-linear-gradient(to right,gray,gray 10px,transparent 0,transparent 20px); */background-image: linear-gradient(to right,gray,gray 10px,transparent 0);background-size: 20px 100%;

额外提一句：实现虚线还可以使用svg，关键词：stroke-dasharray

斜向条纹

linear-gradient的第一参数可以设置方向，除了水平垂直外，还可以设置角度。现在尝试将其设置为45deg

      background: linear-gradient(45deg, #30e8bf 50%, #ff8235 50%);background-size: 50px 50px;

发现这些格子没有无缝衔接，这时候可以利用css的另一个函数repeating-linear-gradient，这个函数会无限重复色标，所以色标位置应该填写具体数值，而且不需要设置background-size，如下图

      background: repeating-linear-gradient(45deg,#30e8bf 0,#30e8bf 25px,#ff8235 0,#ff8235 50px);

三角形

在创建斜向条纹时，无意中发现了三角形，现在我们尝试将另一颜色设置为透明，就能完美的实现了一个三角形啦

      height: 30px;width: 30px;background-image: linear-gradient(45deg, gray 50%, transparent 0);

进度条动画 progress

斜向条纹搭配ainimation，动态改变background-position-x可以实现进度条动画

    .div10 {height: 20px;background: repeating-linear-gradient(45deg,#30e8bf 25%,#ff8235 0,#ff8235 50%,#30e8bf 0,#30e8bf 75%,#ff8235 0);background-size: 30px 30px;animation: roll 1s linear infinite;}@keyframes roll {from {background-position-x: 0;}to {background-position-x: 30px;}}

网格

linear-gradient可以通过逗号，叠写多层渐变，横向网格+竖向网格叠加可以实现网格效果

      background-color: teal;background-image: linear-gradient(white 1px, transparent 0),linear-gradient(90deg, white 1px, transparent 0);background-size: 30px 30px;

多个linear-gradient叠加，再组合多个background-size还可以实现下图中效果

      background-color: teal;background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0),linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0),linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

通过颜色透明度的叠加，可以实现类似桌布的效果

      background-color: white;background-image: linear-gradient(90deg,rgba(255, 0, 0, 0.5) 50%,transparent 0),linear-gradient(rgba(255, 0, 0, 0.5) 50%, transparent 0);background-size: 30px 30px;

圆点阵列

通过径向渐变radial-gradient可实现圆点，重复平铺就能形成圆点阵列
首先回顾下radial-gradient参数

background-image: radial-gradient(shape size at position, start-color, …, last-color);

值	描述
shape	确定圆的类型，可取椭圆ellipse，圆形circle
size	定义渐变的大小
position	定义渐变的位置，可取center（默认）、top、bottom
start-color, …, last-color	用于指定渐变的起止颜色

      background-color: #f2f2f2;background-image: radial-gradient(gray 20%, transparent 0);background-size: 30px 30px;

波点图案

两层径向渐变，通过设置background-position将第二层背景偏移量设置为第一层的一半，可以实现波点图案