css 渐变

最新推荐文章于 2023-07-07 16:05:03 发布

ting_咩

最新推荐文章于 2023-07-07 16:05:03 发布

阅读量82

点赞数

分类专栏：总结 - css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/u010395896/article/details/129769095

版权

总结 - css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

线性渐变 linear-gradient

direction 图解

color [ position ] 图解

线性渐变 linear-gradient

接收参数：[ direction ], color [ position ]

其中：

direction 表示 渐变方向，可略；
color 表示 渐变颜色，position 表示 渐变停止位置，两者通过空格分隔组成一个字符串作为参数，且 position 可略；
可通过重复 color 与 position 来创建任意数量颜色的渐变。

background-image: linear-gradient(direction, 
color_1 position_1, ..., color_n position_n)

direction 图解

1、不传 direction ，即默认情况的三色渐变：

background-image: linear-gradient(#0303c1, #fff, #7ff0fb);

2、direction 为 0deg ：

background-image: linear-gradient( 0deg , #0303c1, #fff, #7ff0fb);

3、direction 为 45deg ：

background-image: linear-gradient( 45deg , #0303c1, #fff, #7ff0fb);

color [ position ] 图解

1、整体渐变：

background-image: linear-gradient(#0303c1 0%,#fff 50%, #7ff0fb 100%);

2、局部渐变：

background-image: linear-gradient(#0303c1 20%,#fff 50%, #fba97f 80%);

创建条纹背景

两种颜色平铺：

当某个颜色的 position 小于上个颜色的 position 时，该颜色会停止渐变，直接用于填充：

background-image: linear-gradient(
    rgb(255, 187, 51) 50%, 
    rgb(85, 136, 187)  0
);

渐变实际是由 background-image 生成的，因此可用 background-size: width_x width_y 来改变其在 x、y 轴的大小，如：background-size: 100% 40px;

而背景图片默认是在 x、y 轴重复平铺的，于是就会生成条纹。

于是要创建一个三色条纹：（假定三色为：红、绿、蓝）

首先，颜色1的 position 设为用红色填充的位置（如 33.33%）；
其次，颜色2、颜色3 设为绿色，且颜色2的 position <= 颜色1的 position（0～33.33% 皆可，假定 0），颜色3的 position 设为想用绿色填充的位置 66.66%，于是接着红色填充截止的位置开始填充绿色；
然后，颜色4 设为蓝色，且颜色4 的 position 必须 <= 颜色3 的 position ，才能阻止其颜色渐变；
最后可配合 background-size 控制条纹粗细。

background: linear-gradient(
    red 33.3%,  /* 第一种颜色：红 */
    #08f508 0, #08f508 66.6%,  /* 第二种颜色：绿 */
    blue 0 /* 第三种颜色：蓝 */
);
/* background-size: 100% 15px; */

三色条纹示意图：

创建格子背景

普通网格背景：

基于条纹背景来实现网格背景，只需要通过两个渐变：

background-image: linear-gradient(#666 2%, transparent 0),
    linear-gradient(to right, #666 2%, transparent 0);
background-size: 100% 50px, 50px 100%; /* 控制两个渐变的大小 */

错位的灰白像素格子背景：

1、通过控制渐变角度可实现三角形平铺：

background-image: linear-gradient(45deg, #666 50%, transparent 0);
background-size: 100px 100px;

2、通过控制渐变停止位置将三角形缩小至占 1/4 格，并通过重复 color [ position ] 继续生成右上角的三角形：

background-image: linear-gradient(45deg,
    #666 25%, transparent 0, 
    transparent 75%, #666 0
);
background-size: 100px 100px;

3、多加一个同样的渐变，生成两组相同的上图所示占据对立顶角的平铺三角形，然后移动其中一组的位置，拼合成正方形：

background-image: 
    linear-gradient(45deg, #666 25%, transparent 0, transparent 75%, #666 0),
    linear-gradient(45deg, #666 25%, transparent 0, transparent 75%, #666 0);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;