div {
height:100px;
width:200px;
background-image:linear-gradient(90deg,red 50%,blue 50%);
}
4. 颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了。
div {
height:100px;
width:200px;
background-image:linear-gradient(90deg,transparent 50%,blue 50%);
}
5. 同理联想到径向渐变,同样缩小渐变圈,直至重合,靠近圆心的颜色设成transparent。
/* 径向渐变主体 */
.raidal {
height:100px;
width:100px;
background:radial-gradient(transparent 50%,blue 50%);
}
6. 径向渐变是可以设置半径圆心位置的,所以设到左顶角,left top 调整半径大小为 200px,就发现背景透明的内凹圆角实现了。
应用时可以用伪元素设置,然后用绝对定位,子绝父相,调整位置,组合成想要的效果
/* 径向渐变主体 */
.raidal1 {
height:100px;
width:100px;
background:radial-gradient(