线性渐变
background-image: linear-gradient(to right, red , yellow);
径向渐变
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;
渐变色的文字
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;
渐变的边框
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;