CSS的奇特作用

文字两端对齐

<ul class="justify-text">
    <li>账号</li>
    <li>密码</li>
    <li>手机号</li>
    <li>联系地址</li>
</ul>

<style> 
  .justify-text li{ 
    padding: 0 20px;
    width: 80px;
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    background-color: #545454;
    text-align-last: justify;/* 核心属性 */
    margin-top: 5px;
  } 
</style>

伪类

<div class="avatar" data-messages="我是伪类"></div>
.avatar::before { 
    content: attr(data-messages); 
}

<ul class="ul"> 
    <li class="list">
        <span class="money">100</span>
    </li> 
</ul>
.list .money:before{ content: "￥"; }
.list .money:after{ content: "元"; }

clip裁剪

<div class="box"> 
  <div class="clip"> 
    <div class="left"></div> 
    <div class="right width-none"></div> 
  </div> 
  <div class="num"> </div> 
</div>

.clip{
    width: 200px; 
    height: 200px; 
    position: absolute;
    border: 10px solid #ccc;
    border-radius: 50%; 
    clip: rect(0, 200px, 200px, 100px); //核心代码
}

<image src="clip.png" mode="widthFix" :style="{clip:clipRegion }"/> 
let proportion = this.winW / 375; 
this.$nextTick(() => { 
    let currentRPX = Math.floor((this.clipValue / (this.maxValue + 1)) * 100 * 2.74 * proportion,0); 
    this.clipRegion = `rect(0px,${currentRPX}px,50px,0px)`; 
}）

视差广告效果

可参考 (codepen.io/mudontire/p…)