css工作中常用技巧

vue中用纯css实现进度条

<div class="progress">
                                        <span
                                            :style="[
                                                {
                                                    width: 80+
                                                          '%',
                                                },
                                            ]"
                                        >
                                            <p style="opacity: 0">y</p>
                                        </span>
                                    </div>

style

  .progress {
                                    width: 1.4rem;
                                    height: 0.1rem;
                                    background-color: #cccccc;
                                    border-radius: 5px;
                                    margin-right: 0.15rem;
                                    margin-top: 0.1rem;
                                    span {
                                        display: inline-block;
                                        border-radius: 5px;
                                        height: 100%;
                                        background-color: #4ba8e3;
                                    }
                                }