css渐变基础和效果收集

linear-gradient

linear-gradient(45deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

渐变角是容器垂直线顺时针旋转的角度
1. 多段百分比值，规则

/* 百分比 */
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red, blue); 
/*相当于*/
linear-gradient(red 0%, blue 100%); 

/* 不写百分比则均匀分布 */
linear-gradient(red, orange, yellow, green, blue);  

百分比简写规则 1. 第一个颜色，0%为起始点，大于0则为终止点 2. 后面颜色，百分比皆为起始点 3. 颜色在起始点为纯色，在起始点和终止点之间为纯色块 4. 百分比后者小于前者，后者使用前者的终止值

linear-gradient(red 50%, orange 40%);
/*相当于*/
linear-gradient(red 50%, orange 50%);

使用0，可以方便的制作纯色条

background:linear-gradient(
    red 0%,
    red 14.3%,
    orange 0,
    orange 50%
    yellow 0,
    yellow 100%
);

5. 颜色的起始值和终止值有多种写法 下面3种写法等价

/*一个颜色两次两个值*/
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
/*一个颜色一次两个值*/
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
/*一个颜色一次两个值*/
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

2. 条纹(斑马)滚动条   repeating-linear-gradient 可以方便的实现斑马条纹
linear-gradient   不能直接实现斑马条纹，它会将渐变充满整个容器。配合background-size可以实现条纹，但是需要计算，颜色也不能直接顺序写，一种颜色要分多段来写，才能达到整个容器一致的重复渐变。并且更换倾斜角度，background-size的值要重新计算。代价很高，不推荐使用。   2.1 斑马条

width: 200px;
height: 20px;
margin: 50px auto;
background-color: yellowgreen;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%,  transparent 75%, transparent 100%);
background-size: 20px 20px;

2.2 斑马条 带滚动效果

.progress {
    margin: 300px auto;

    width: 600px;
    height: 20px;

    background-image: repeating-linear-gradient(
        45deg,
        #2ed573 0%,
        #2ed573 1%,
        #7bed9f 1%,
        #7bed9f 2%
    );

    background-position: -2% 0;
    background-size: 150%;
    animation: slider 5s linear infinite;
}

@keyframes slider {
    100% {
        background-position: -100% 0;
    }
}

3. 渐变中transparent应用   渐变中，可以使用transparent透明色，可以达到特别的效果。例如，生成不规则图形，生成虚线等   4. 多背景和渐变结合使用   background可以使用多背景，并且前面的背景优先级高，可以覆盖后面的背景，结合background-size和background-position，可以配合生成复杂的图形。background-image支持渐变，渐变本身就可以绘制复杂的图形，加上可以配合图片，背景色等，绘制特定的图形，不是问题。   5. 渐变实现效果记录
5.1 虚线

.dashed {
    height: 1px;
    background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);
    background-size: 10px 100%;
}

虚线 带滚动

.g-section {
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
    
    &:focus-within {
        background: 
            linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y;
        background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
        animation: linearGradientMove .5s infinite linear;
    }
}

@keyframes linearGradientMove {
    100% {
        background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
    }
} 

5.2 气泡框的尖头

.tri {
    width: 6px; height: 6px;
    background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;
    background-size: 6px 1px, 1px 6px, 6px 6px;
    transform: rotate(-45deg);
}

5.3 加减号

.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
} 

具体可参考 CSS3 linear-gradient线性渐变实现虚线等简单实用图形   5.6 铜钱

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
background-image: linear-gradient(to right, yellow 25%, transparent 25%, transparent 75%,  yellow 75%),
                  linear-gradient(to top, yellow 25%, transparent 25%, transparent 75%,  yellow 75%);

5.7 三角

background-image:linear-gradient(to bottom right,orange 0,orange 49%,transparent 50%,transparent 100%)

5.8 镂空

background-image:radial-gradient(transparent 0,transparent 49%,orange 50%,orange 100%)

5.9. 切角 四个角三角形切角

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: 
        linear-gradient(-135deg, transparent 20px, #425df3 0) top right ,
        linear-gradient(-45deg, transparent 20px, #425df3 0) bottom right,
        linear-gradient(45deg, transparent 20px, #425df3 0) bottom left ,
        linear-gradient(135deg, transparent 20px, #425df3 0) top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

linear-gradient实现切角有缺陷
切角多种实现方法
1. 固定距离使用 clip-path 2. 固定切角使用 conic-gradient(at 100% 0, #B89DFF 250deg, transparent 0) 3. 局部切角使用 linear-gradient   具体可参考 css实现切角   6. 渐变种类   linear-gradient : 线性渐变 radial-gradient : 径向渐变 conic-gradient: 圆锥渐变
repeating-linear-gradient 重复线性渐变 repeating-radial-gradient 重复径向渐变 repeating-conic-gradient 重复锥形渐变
repeating-radial-gradient
可以实现 环形波纹 环形loading 黑胶唱片
conic-gradient
可以实现 饼图 炫酷刻度表 环形进度条 彩色矩形边框 彩色环形 loading
具体可参考 神奇的 conic-gradient 圆锥渐变 认识“新”朋友—conic-gradient