CSS样式打勾、渐变色 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /**绿色勾*/
        .checked {
            display: inline-block;
            position: relative;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #2ac845;
        }

        /**灰色勾*/
        .uncheck {
            display: inline-block;
            position: relative;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #5f646e;
        }

        .checked:before, .checked:after, .uncheck:before, .uncheck:after {
            content: '';
            pointer-events: none;
            position: absolute;
            color: white;
            border: 1px solid;
            background-color: white;
        }

        .checked:before, .uncheck:before {
            width: 1px;
            height: 1px;
            left: 25%;
            top: 50%;
            transform: skew(0deg, 50deg);
        }

        .checked:after, .uncheck:after {
            width: 3px;
            height: 1px;
            left: 45%;
            top: 42%;
            transform: skew(0deg, -50deg);
        }

        .feature {
            width: 14px;
            height: 6px;
            display: inline-block;
            border: 1px solid black;
            border-width: 0 0 1px 1px;
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            vertical-align: baseline;
        }


        .correct:before {
            content: '\2714';
            color: #008100;
        }

        .incorrect:before {
            content: '\2716';
            color: #b20610;
        }

    </style>
</head>
<body>
<span class="checked"></span>
<span class="uncheck"></span>
<span class="feature"></span>
<!--https://blog.csdn.net/zx562602419/article/details/81020342-->
<!--HTML和CSS content属性特殊字符归纳-->
<span class="correct"></span>
<span class="incorrect"></span>
</body>
</html>

 https://blog.csdn.net/zx562602419/article/details/81020342

渐变色样式

/* 角度、过渡色 */
background-image: linear-gradient(150deg,#9FEAD9,#F6FEFD, #9FEAD9)
/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

 

posted @ 2022-09-08 15:22  ronle  阅读(415)  评论(0)  编辑  收藏  举报