css渐变笔记

线性渐变

/*
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...	用于指定渐变的起止颜色。
*/
background-image: linear-gradient(to right, red , yellow);

径向渐变

/*
radial-gradient(shape size position, color-stop[...,color-stop]);
<position> 径向渐变的圆心位置
<shape> 渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆
<size> 渐变的尺寸大小
<color-stop> 由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length> 
*/
background-image: radial-gradient( gold, red) ;

两个渐变叠加配合背景图平铺

background-image: linear-gradient(rgba(255,0,0,0.5) 50% ,transparent 50%),
                linear-gradient(to right,rgba(255,0,0,0.5) 50% , #fff 50% );
background-size: 50px 50px;

重复线性渐变进行叠加操作

 background-color: yellow;
 background-image: repeating-linear-gradient(-45deg, transparent, transparent 25%, tomato 0, tomato 50%), repeating-linear-gradient(45deg, transparent, transparent 25%, dodgerblue 0, dodgerblue 50%);
 background-blend-mode: multiply;
 background-size: 50px 50px;

渐变色的文字

/*
-webkit-background-clip:text 这个属性可以将背景色裁剪到文字中 
*/
 color: transparent;
 background:
     repeating-linear-gradient(-45deg,
         transparent,
         transparent 25%,
         tomato 0,
         tomato 50%),
     repeating-linear-gradient(45deg,
         transparent,
         transparent 25%,
         dodgerblue 0,
         dodgerblue 50%), wheat;
         font-size: 50px;
 background-size: 50px 50px;
 background-blend-mode: multiply;
 -webkit-background-clip: text;

渐变的边框

/*
利用border-image-source 属性可以把渐变放在边框中
*/
color: transparent;
background:
    repeating-linear-gradient(-45deg,
        transparent,
        transparent 25%,
        tomato 0,
        tomato 50%),
    repeating-linear-gradient(45deg,
        transparent,
        transparent 25%,
        dodgerblue 0,
        dodgerblue 50%), wheat;
font-size: 50px;
background-size: 50px 50px;
background-blend-mode: multiply;
-webkit-background-clip: text;
border: 20px solid;
border-image-source:
    repeating-linear-gradient(-45deg,
        cyan 0,
        cyan 15px,
        transparent 15px,
        transparent 30px,
        tomato 30px,
        tomato 45px,
        transparent 45px,
        transparent 60px);
border-image-slice: 20;