手写CSS之实际开发中用到的几个典型实现

1. 文字下划线自定义

   给文字设置position为relative且为inline-block；给after设置position为absolute且设置left和top

   //html部分
   <div v-for="(item,index) in data" @click="change(item,index)" :key= "index" 
   	:class="(index==showTopicIndex)?'current':'topItem' " :data-index="index">
   	{{item.name}}</div>
   //css部分	
   .topItem{
       color: #fff;
       display: inline-block;
       font-size: .75rem;
       margin: 0 .5rem;
   }
   .current{
       color: #fff;
       display: inline-block;
       position: relative;
       font-size: .75rem;
       margin: 0 .5rem;
       padding-bottom: 0.2rem;//让下划线可正常展示，否则只会可见一部分
   }
   .current:after{
       position: absolute;
       background: #fff;
       left: 0;、
       top: 1rem;
       height: 0.1rem;
       border-radius: 0.1rem;
       width: 100%;
       margin-top: 0.1rem;
       content: '';
   }
   

2. 图片和div对齐展示

   当设置图片和普通块级元素在同一行展示时，若无特殊处理会有微小上下偏移。

    //html部分
    <img src="./img/live.gif" class="backVideo" v-if="item.showStatus==0">
    <div class="timeBackground" v-if="item.showStatus!=0&&item.time">
        <div class="timeConfig" >{{item.time}}</div> 
    </div>
    //css部分
    .backVideo{
       height: 0.9rem;
    }
    .timeBackground{
       display:inline-block;
       position: absolute;
       left: 2.5rem;
       padding: 0.1rem 0.3rem;
       background-color: rgb(163, 171, 178);
       height: 0.7rem;
       border-radius: 0px 0px 5px 0px;
    }
   

3. 背景图片模糊展示

   需要设置z-index让背景图片展示在其他元素下方

   .topBanner {
       background: url('../img/bannerDT.png');
       width: 100%;
       position: relative;
       background-size: 100% 100%;
       z-index: -1;
   }
   .topBanner:after{
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       background: inherit;
       filter: blur(5px);
       height: 100%;
       z-index: -1;
   }