纯css实现评分展示

项目中需要使用五个星星进行评分展示，尤其当前项目阶段，只是服务端渲染展示而已，不需要人为手动评分等。因此为了减少js代码，纯粹使用css实现这个效果，提高加载速度

1、原理

• position,overflow，content，以及伪元素:after，
• 使用两组容器(分别排列一样的五个星星,通过content设置⭐字体,后面可以通过color控制颜色)，其中一组容器通过定位position和z-index覆盖在另外一组容器上
• 层级比较高，可以通过 overflow 和 width进行大小超出隐藏设置
• 层级比较高的width可以通过服务端渲染赋值，也可以通过双向绑定设置，或者单纯一句js控制属性值，就可以实现星星评分展示

2、实现

    <div class="star-rating" css-starRating>
        <div class="star-rating-top" style="width:70%">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="star-rating-bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <style>
        .star-rating[css-starRating] {
            font-size: 0;
            height: 25px;
            margin: 0 auto;
            position: relative;
            display: table;
            padding: 0;
            text-shadow: 0px 1px 0 #a2a2a2;
        }
    
        .star-rating[css-starRating] span:after {
            content: "★";
            font-family: Helvetica;
        }
    
        .star-rating[css-starRating] .star-rating-top {
            color: #ff9901;
            padding: 0;
            position: absolute;
            z-index: 1;
            display: block;
            top: 0;
            left: 0;
            overflow: hidden;
            white-space: nowrap;
        }
        .star-rating[css-starRating] .star-rating-top>span {
            color:#ff9901;
            font-size: 20px;
        }
    
        .star-rating[css-starRating] .star-rating-bottom {
            padding: 0;
            display: block;
            z-index: 0;
        }
        .star-rating[css-starRating] .star-rating-bottom>span{
            color: #ddd;
            font-size: 20px;
        }

    </style>

效果如下：

3、拓展

• 后期如果要纯css实现动态评分设置，可以通过input的:checked
• 后期如果是字体库中，没有对应的字体图形，可以通过svg的fill属性，去动态实现不同图形颜色的填充，
• 原理大致一样，区别在于一个是通过content设置字体，一个是通过图形svg设置

    <div class="star-rating" css-starRating>
        <div class="star-rating-top" style="width:70%">
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442" fill="red"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443" fill="red"></path></svg>
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442" fill="red"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443" fill="red"></path></svg>
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442" fill="red"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443" fill="red"></path></svg>
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442" fill="red"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443" fill="red"></path></svg>
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442" fill="red"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443" fill="red"></path></svg>
        </div>
        <div class="star-rating-bottom">
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443"></path></svg>
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443"></path></svg>
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443"></path></svg>
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443"></path></svg>
            <svg t="1659777391420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2441" width="10" height="10"><path d="M512 512m-299.52 0a299.52 299.52 0 1 0 599.04 0 299.52 299.52 0 1 0-599.04 0Z" p-id="2442"></path><path d="M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z" p-id="2443"></path></svg>
        </div>
    </div>
    <style>
        .star-rating[css-starRating] {
            font-size: 0;
            height: 25px;
            margin: 0 auto;
            position: relative;
            display: table;
            padding: 0;
            text-shadow: 0px 1px 0 #a2a2a2;
        }
        .star-rating[css-starRating] .star-rating-top {
            padding: 0;
            position: absolute;
            z-index: 1;
            display: block;
            top: 0;
            left: 0;
            overflow: hidden;
            white-space: nowrap;
        }
        .star-rating[css-starRating] .star-rating-bottom {
            padding: 0;
            display: block;
            z-index: 0;
        }

    </style>