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){}复制代码

转载于:https://juejin.im/post/5cee26fd6fb9a07f0052bdd0