2022工作知识小结（背景渐变+圆角渐变）

1.背景渐变+圆角渐变
background-image：第一个为背景渐变，第二个为边框渐变
background-clip：背景裁切的时，第一个背景需要从内容区域开始裁切，因此设置为content-box；
第二个背景需要作为渐变边框，因此需要从边框处开始裁切
padding：为边框的宽度
参考链接

.img-box{
	width: 66px;
    height: 75px;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: 0px 4px 10px 1px rgb(0 0 0 / 10%);
    background-color: transparent;
    box-sizing: border-box;
    background-image: linear-gradient(45deg, #FFFFFF 7%, red 100%), linear-gradient(86deg, #f8f8f8, yellow);
    border-radius: 12px;
    background-clip: content-box, padding-box;
    
}

效果展示