background:linear-gradient
参数介绍
background:linear-gradient(angle,color-stop length,color-stop,length)
angle
可以指定0~360deg
,或者用方向:to left,to left bottom
等属性
举例:div
的其余属性为:color-stop
指颜色的终点length
指颜色跨越的距离
举例
1.渐变
#div{
width: 200px;
height: 100px;
margin: 100px;
padding: 20px;
}
添加background: linear-gradient(0deg, red 20%, blue 60%, yellow);
效果:
即:沿0deg
渐变,从0~20%*height
颜色为red
,从20%~60%*height
颜色为blue
,从60%~100%*height
颜色为yellow
。
2.无渐变
添加background: linear-gradient(0deg, red 20%, blue 20%,blue 80%, green 80%,green 100%);
效果:
即:沿0deg
渐变,从0~20%*height
颜色为red
,从(20%~20%)*height
颜色为red到blue的过渡
,从20%~80%*height
颜色为blue
,从(80%~80%)*height
颜色为blue到green的过渡
,从80%~100%*height
颜色为green
。
可简写为background: linear-gradient(0deg, red 20%, blue 0,blue 80%, green 0);
因为颜色后面的length必须是递增的,若写为递减的浏览器将自动将length
调整为前面最近的length
值,同时相同颜色相同length
值会覆盖。
3.改变渐变方向
添加background: linear-gradient(45deg, red 20%, blue 60%, yellow);
或者background: linear-gradient(to right top, red 20%, blue 60%, yellow);
效果:
4.折角
第1步——剪
添加background: linear-gradient(225deg, transparent 1.5em, blue 1.5em, blue);
或者简写为background: linear-gradient(225deg, transparent 1.5em, blue 0);
其中右上角红色线条的长度为1.5em
第2步——添加折角
添加background: linear-gradient(225deg, transparent 50%, gray 50%,gray) 100% 0 / 2em 2em;
其中,100% 0 / 2em 2em
表示从(X:100%*width,Y:0*height)
处即右上角开始过渡,长宽分别为2em 2em
,接下来添加no-repeat属性,
只显示最右上角的一个正方形,上半部分为透明色。
上图为审查元素时的效果。现在将以上效果叠加起来:
background: linear-gradient(225deg, transparent 50%, green 50%,green)
no-repeat 100% 0 / 2em 2em,
linear-gradient(225deg, transparent 1.5em, #00cd00 0);
第3步——添加折角
为了做出其他角度的更逼真的折页效果,即过渡的角度225deg
如下图:
首先将剪掉的折叠角放在div
中,添加的折角放在div::before
中,
第1步——剪角180+30=210deg
#div {
width: 200px;
height: 100px;
margin: 100px;
padding: 20px;
position: relative;
background: linear-gradient(210deg, transparent 1.5em, green 0);
}
第2步——添加折角
#div::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 3em;
height: 1.73em;
background: linear-gradient(210deg, red 50%, black 0);
}
第3步——改变添加折角的角度
想要的折角上上图中红色部分以它斜边为对称轴的对称部分,而上面background: linear-gradient(210deg, red 50%, black 0);
中,不管before中width和height
是多少,都是在50%
处以上为red
,因此,考虑到将before中width和height
对换,同时渐变的角度+30即240deg
:
#div::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1.73em;
height: 3em;
background: linear-gradient(240deg, red 50%, black 0);
}
第4步——将添加折角向上平移
将添加的折角向上平移到其底部和剪掉的三角形最右下重合,即上移3-1.73~=1.3
#div::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1.73em;
height: 3em;
background: linear-gradient(240deg, red 50%, black 0);
transform: translateY(-1.3em);
}
第4步——将添加折角向上平移后旋转
以右下角为旋转中心逆时针旋转30deg
,
#div::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1.73em;
height: 3em;
background: linear-gradient(240deg, red 50%, black 0);
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
}
第4步——添加阴影效果
将background
中的red换成transparent
,再添加阴影效果
#div {
width: 200px;
height: 100px;
margin: 100px;
padding: 20px;
position: relative;
border-radius:0.5em
background: linear-gradient(210deg, transparent 1.5em, green 0);
}
#div::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1.73em;
height: 3em;
background: linear-gradient(240deg, transparent 50%, #138a18 0);
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -0.2em 0.2em 0.3em -0.1em #065206;
}