css右下角选中对勾 |css渐变色demo

/* 先定义好基本样式 */
input[type="checkbox"] {
display: none;
}
.checkbox-wrap {
position: relative;
display: inline-block;
cursor: pointer;
}
.checkbox-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border: 2px solid #000;
}
/* 开始制作勾选符号 */
.checkbox-label::before {
content: "";
position: absolute;
top: 6px;
left: 8px;
width: 7px;
height: 14px;
border: 2px solid #000;
border-top: none;
border-right: none;
transform: rotate(45deg);
opacity: 0;
transition: all ease-in-out 0.2s;
}
/* 当选中时显示勾选符号 */
input[type="checkbox"]:checked + .checkbox-wrap .checkbox-label::before {
opacity: 1;
}

代码中，大家首先定义了基本的样式，其中input[type=”checkbox”]的display属性设为none，是为了让勾选操作不受到默认样式的影响。接着，大家在checkbox-wrap类上定义了一些鼠标交互行为，使得用户可以点击勾选标签。

针对勾选标签本身，大家使用了position、transform、width、height等属性进行样式定义。同时，为了实现勾选符号的制作和动画效果，大家使用了伪元素before和transition属性等技巧。

最后，通过设定input[type=”checkbox”]:checked + .checkbox-wrap .checkbox-label::before这个CSS选择器，即当复选框被选中时，显示勾选符号，实现了CSS右下角选中对勾的效果。