线性渐变
相邻两个区域百分比的差就是这两个颜色渐变过渡的面积占比。(90-末尾100% 是混合颜色)
不写该是百分比多少还是多少,末尾不写当成100%,开头不写当成0%
写成0就当成0%,比前面小,显示单个颜色
如果前面已经是40%了,后面是30%,则比前面小,显示单个颜色
#app {
width: 200px;
height: 100px;
background: linear-gradient(to top right, yellow 50%, green 100%);
/* 0-50%yellow 50%-100%混合 100%*/
background: linear-gradient(to top right, yellow 50%, green);
/* 0-50%yellow 50%-100%混合 不写该是百分比多少还是多少 100%*/
background: linear-gradient(to top right, yellow 50%, green 0);
/* 0-50%yellow 50%-100%green 写成0就当成0%,比前面小,显示单个颜色*/
background: linear-gradient(to top right, yellow 50%, green 40%);
/* 0-50%yellow 50%-100%green 比前面小,显示单个颜色*/
background: linear-gradient(red 10%, green 85%, blue 90%);
/* 0%-10%red 10%-95%混合 85%-90%混合 90-100%blue */
background: linear-gradient(red 0%, green 50%, blue 100%);
background: linear-gradient(red, green 50%, blue 100%);
/* 0%-50%混合 50%-100%混合 三个颜色均匀分布的样子,红色到绿色的渐变占50%,绿色到蓝色的渐变占100%. */
background: linear-gradient(red 0%, green 50%, blue 10%);
/* 0%-50%红绿混合 50%-100%blue 后面比50%小,显示单个颜色*/
background: linear-gradient(red 0%, green 50%, blue 0);
/* 0%-50%红绿混合 50%-100%blue 后面是0%比50%小,显示单个颜色*/
background: linear-gradient(red, green 50%, blue 0);
/* 0%-50%红绿混合 50%-100%blue 后面是0%比50%小,,显示单个颜色*/
background: linear-gradient(red 0, green 50%, blue 0);
/* 如果有0表示0% */
}
background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);
rgba 使用了 0.5 的透明度。
background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
用百分比指定起始颜色的位置,默认值为 0%
background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);
background: linear-gradient(to top right, yellow 50%, green 0);
/* 注意: 起始颜色的位置是从它自身所占的位置开始计算的, 第一个占了50%, 那第二个的 0 就是从50%开始 */
切角
哪里要切,就把这个放在那个div中就行了
background: linear-gradient(135deg, transparent 0, #143872 0) top left,
linear-gradient(-135deg, transparent 10px, #143872 0) top right,
linear-gradient(-45deg, transparent 10px, #143872 0) bottom right,
linear-gradient(45deg, transparent 10px, #143872 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
参考 https://blog.csdn.net/qzw752890913/article/details/108431234