css技能你get到了嗎？

1.css聲明變量

body {    
        --theme-color: #f00
     }
.common-button {    
        color: var(--theme-color)
}
.button {    
        border: 1px solid var(--color, blue);
}
.button:hover {    
        --color: pink;
}複製代碼

<div class="common-button ">        
    css引用    
</div>    
<button class="button">
    button    
</button>    
<button class="button">        
    botton hover    
</button>複製代碼

效果圖

2.mark手寫遮罩層

.mark {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    outline: 0;
    -webkit-overflow-scrolling: touch;
    background-color: rgb(0, 0, 0);
    filter: alpha(opacity=60);
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 9999;
}複製代碼

<div class="mark"></div>    
<div class="common-button ">        
    css引用    
</div>    
<button class="button">
    button    
</button>    
<button class="button">        
    botton hover    
</button>複製代碼

3.兼容方案

//達到臨界值時執行的樣式
@media screen and (max-width:360px) and (min-width:321px){}複製代碼