CSS3中的线性渐变（linear-gradient）是一种常用的背景渐变效果，它可以实现各种简单的图形，如虚线、斜线等，并且使用方便
线性渐变基础
在了解如何使用CSS3的linear-gradient属性实现虚线等简单实用图形之前，先来了解一下线性渐变的基础知识。
- linear-gradient语法
linear-gradient是一个CSS3的渐变属性，用于创建线性渐变效果。它的语法如下：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
其中，direction表示渐变的方向，可以设置为to top、to bottom、to left、to right等，也可以使用角度值表示渐变方向；color-stop表示颜色的起始点和结束点，可以设置多个。
例如，下面的代码将会创建一个从上到下的线性渐变效果，颜色从白色渐变到黑色：
background: linear-gradient(to bottom, #fff, #000);
- 线性渐变使用情况
线性渐变经常被使用到背景中，例如用作页面的背景色或者元素的背景色。在许多情况下，使用线性渐变能够使网页看起来更加美观、生动，并且能够满足不同的设计需求。
虚线实现
虚线（dashed）是一种常用的边框样式。在CSS3中，可以使用border-style属性将元素的边框设置为虚线。但有时候，我们需要将元素内部也设置为虚线效果，此时就可以使用linear-gradient属性来实现。
例如，下面的代码将会创建一个从上到下的虚线效果，颜色为红色：
background-image: linear-gradient(to bottom, red 50%, transparent 50%);
background-size: 100% 10px;
在这个例子中，使用了linear-gradient属性创建了一个从上到下的渐变，其中red表示起始颜色，transparent表示结束颜色（即没有颜色）。这里的50%表示虚线和空白的比例，即50%的红色，50%的空白。最后使用background-size属性指定虚线的高度为10px，宽度为100%。
斜线实现
斜线（diagonal line）是一类常见图形，可以用于页面的装饰或者分割。在CSS3中，可以使用linear-gradient属性来实现斜线效果。
例如，下面的代码将会创建一个从左上角到右下角的斜线效果，颜色从白色渐变到黑色：
background-image: linear-gradient(45deg, #fff 50%, #000 50%);
background-size: 10px 10px;
在这个例子中，使用了linear-gradient属性创建了一个从左上角到右下角的渐变，其中45deg表示斜线的角度，#fff表示起始颜色，#000表示结束颜色。这里的50%表示斜线和空白的比例，即50%的白色，50%的黑色。最后使用background-size属性指定斜线的高度为10px，宽度为10px。
总结
通过CSS3的linear-gradient属性，可以很方便地实现虚线等简单实用图形。在使用时，需要根据具体需求调整参数，如设置渐变方向、颜色起始点等。此外，还可以使用background-size属性来控制图形的大小和间隔。
