用linear-gradient和radial-gradient属性写出可爱的CSS背景

在我之前的学习中，一般用linear-gradient属性写渐变背景，一次想实现斜条纹背景的情况下，学习了linear-gradient和radial-gradient属性的妙用，在这里做记录。github传送门👈，喜欢的话可以给个star🤩

1.使用linear-gradient属性实现条纹效果

(1)普通条纹

实现这样的条纹背景很简单，linear-gradient属性设置两种或两种以上的颜色，然后用background-size（默认repeat）布满整个背景。条纹背景实现原理简单，变换角度就可以得到不同方向的条纹。

background-image: linear-gradient(#ffcbba 20px, #ed8181db 0);
background-size: 40px 40px;

(2)文字条纹阴影

拓展一个普通条纹很好看的文字阴影应用：用两个伪元素，一个重复文字作背景文字阴影，一个作一片斜条纹（背景色+另一种颜色），斜条纹的z-index在最下面。

div::after{
    content: attr(data-name);
    position: absolute;
    top: 0.06em;
    left: 0.12em;
    color: #d28787;
    z-index: -2;
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(-45deg, #ffd5d5 0%, #ffd5d5 25%, transparent 25%, transparent 50%, #ffd5d5 50%, #ffd5d5 75%, transparent 75%, transparent 100%);
    background-size: 8px 8px;
    z-index: -1;
}

(3)双重叠加条纹

这种效果真的好可爱啊，原理也是linear-gradient属性一横一竖，透明度调低一些，叠加的效果就很棒。

background-image: linear-gradient(rgba(255, 0, 0, 0.2),20px,transparent 0),
                  linear-gradient(90deg,rgba(255, 0, 0, 0.2),20px,transparent 0);
background-size: 40px 40px;

(4)苏格兰桌布

调节一下条纹的粗细，加多一些条纹，效果也很好。

background-image: linear-gradient(rgba(255, 0, 0, 0.2),20px,transparent 0),
                  linear-gradient(90deg,rgba(255, 0, 0, 0.2),20px,transparent 0);
background-size: 40px 40px;

(5)波点背景

使用了radial-gradient画小圆圈，然后background-size重复：

background-image: radial-gradient(#90c362 30%,transparent 31%);
background-size: 20px 20px;

(6)实现笔记本纹理

条纹设小一些，然后设置transparent：

background-image: linear-gradient(#ccc 1px, transparent 0);
background-size: 30px 30px;

(7)radial-gradient属性实现波浪边框

图片（来源百度图片）加个波浪型边框：

波浪的原理：使用radial-gradient描绘圆，然后background-size重复，形成一串小圆珠：

background-image: radial-gradient(50px circle, #6b3fa78a 50px, transparent);
background-size: 100px;

CSS真是很奇妙的东西，稍微用点心就可以写出很好看很有意思的东西。

在学习过程中写下来这篇文章，若文章内容有错误或不妥的地方，还请您在评论区指正，蟹蟹(❤´艸｀❤)