阅读 46

用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真是很奇妙的东西,稍微用点心就可以写出很好看很有意思的东西。

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

关注下面的标签,发现更多相似文章
评论