CSS背景效果_css 背景特效-优快云博客

本文链接：https://blog.youkuaiyun.com/wDeveloper/article/details/124593801

前言

疫情封在家一个多月了，抽空研究一下 CSS 背景。实现效果如下，现把代码奉上。

css背景

纯色背景

background-color: rgb(255, 73, 73)

线性渐变(linear-gradient)

默认效果

background: linear-gradient(white, red)

改变方向（从左向右）

linear-gradient(to right, white, red)

改变方向（从左上到右下）

background: linear-gradient(to bottom right, white, red)

旋转角度

background: linear-gradient(45deg, white, red)

多个颜色

background: linear-gradient(white, orange, red)

彩条

 background: linear-gradient(to right,
            white 33.33%,
            orange 33.33% 66.66%,
            red 66.66% 100%
            );

彩条旋转

background: linear-gradient(45deg,
            white 33.33%,
            orange 33.33% 66.66%,
            red 66.66% 100%
            );

四向渐变

 background: linear-gradient(315deg,rgb(0, 137, 134),rgba(255, 0, 0, 0) 50%),
             linear-gradient(45deg, rgb(255, 0, 0), rgba(255, 0, 0, 0) 50%),
             linear-gradient(135deg, rgb(12, 175, 0), rgba(255, 0, 0, 0) 50%),
             linear-gradient(225deg, rgb(85, 0, 255), rgba(255, 0, 0, 0) 50%);

大格子

 background: linear-gradient(
              90deg,
              rgba(255, 30, 30, 0.5) 20%,
              transparent 20% 40%,
              rgba(255, 30, 30, 0.5) 40% 60%,
              transparent 60% 80%,
              rgba(255, 30, 30, 0.5) 80% 100%
            ),
            linear-gradient(
              rgba(255, 30, 30, 0.5) 20%,
              transparent 20% 40%,
              rgba(255, 30, 30, 0.5) 40% 60%,
              transparent 60% 80%,
              rgba(255, 30, 30, 0.5) 80% 100%
            );

小格子(repeating-linear-gradient)

background: repeating-linear-gradient(
              rgba(255, 0, 0, 0.5),
              rgba(255, 0, 0, 0.5) 5px,
              rgba(255, 255, 255, 0) 5px,
              rgba(255, 255, 255, 0) 10px
            ),
            repeating-linear-gradient(
              90deg,
              rgba(255, 0, 0, 0.5),
              rgba(255, 0, 0, 0.5) 5px,
              rgba(255, 255, 255, 0) 5px,
              rgba(255, 255, 255, 0) 10px
            );

格子旋转

repeating-linear-gradient(
              45deg,
              red 0px,
              red 2px,
              transparent 2px,
              transparent 10px
            ),
            repeating-linear-gradient(
              135deg,
              red 0px,
              red 2px,
              transparent 2px,
              transparent 10px
            );

异形

background: linear-gradient(
              30deg,
              rgb(255, 0, 0, 0.1) 20%,
              rgb(255, 0, 0, 0.2) 20% 30%,
              rgb(255, 0, 0, 0.5) 30% 60%,
              rgb(255, 0, 0, 0.9) 60% 100%
            ),
            linear-gradient(
              68deg,
              rgb(255, 0, 0, 0.1) 15%,
              rgba(255, 0, 0, 0.3) 15% 40%,
              rgb(255, 0, 0, 0.5) 40% 80%,
              rgb(255, 0, 0, 0.9) 80% 100%
            );

径向渐变（radial-gradient）

默认效果（柔性）

background: radial-gradient(white, red)

百分比刚性效果

background: radial-gradient(white 50%, red 50%)

添加一个颜色(柔性)

background: radial-gradient(circle, white, orange, red)

百分比圆圈彩条

 background: radial-gradient(circle,
            white 30%,
            orange 30% 60%,
            red 60% 100%
          );

眩晕圆圈(repeating-radial-gradient)

 background: repeating-radial-gradient(
            circle,
            white,white 5px,
            orange 5px, orange 10px,
            red 10px,red 15px
          );

改变圆的位置

 background: radial-gradient(
            circle at 20% 70%,
            white 20%,
            red 20% 100%
          );

closest-side

background: radial-gradient(
            circle closest-side at 20% 60%,
            white 50%,
            red
          );

综合练习

镜像渐变实现好看背景（一）

 background: radial-gradient(
              circle closest-side at 10% 10%,
              rgba(255, 255, 255, 0.2) 100%,
              transparent
            ),
            radial-gradient(
              circle closest-side at 30% 40%,
              rgba(255, 255, 255, 0.1) 100%,
              transparent
            ),
            radial-gradient(
              circle at 15% 40%,
              rgba(255, 255, 255, 0.1) 10%,
              transparent 10% 100%
            ),
            radial-gradient(
              circle closest-side at 40% 80%,
              rgba(255, 255, 255, 0.1) 100%,
              transparent
            ),
            linear-gradient(90deg, rgb(255, 201, 139), red);

镜像渐变实现好看背景（二）

 background: repeating-linear-gradient(
              135deg,
              rgba(0, 0, 0, 0.03) 0px,
              rgba(0, 0, 0, 0.03) 2px,
              transparent 2px,
              transparent 4px
            ),
            linear-gradient(45deg, red, rgb(255, 195, 155));

镜像渐变实现好看背景（三）

 background: repeating-linear-gradient(
              rgba(0, 0, 0, 0.03) 0px,
              rgba(0, 0, 0, 0.03) 2px,
              transparent 2px,
              transparent 4px
            ),
            repeating-linear-gradient(
              90deg,
              rgba(0, 0, 0, 0.03) 0px,
              rgba(0, 0, 0, 0.03) 2px,
              transparent 2px,
              transparent 4px
            ),
            radial-gradient(rgb(255, 174, 174), rgb(255, 70, 70));

镜像渐变实现好看背景（四）

 background: repeating-linear-gradient(
              white 0px,
              white 10px,
              transparent 2px,
              transparent 12px
            ),
            repeating-linear-gradient(
              90deg,
              white 0px,
              white 10px,
              transparent 2px,
              transparent 12px
            ),
            repeating-linear-gradient(
              45deg,
              red 0px,
              red 2px,
              transparent 2px,
              transparent 12px
            ),
            repeating-linear-gradient(
              135deg,
              red 0px,
              red 2px,
              transparent 2px,
              transparent 12px
            ),
            radial-gradient(white, white);

镜像渐变实现好看背景（五）

 background: repeating-radial-gradient(
              circle at center center,
              rgba(255, 42, 0, 0.3) 0px,
              rgba(255, 42, 0,0.3) 1px,
              transparent 1px,
              transparent 4px
            );
background-size: 16px 16px;