1.css聲明變量

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

<div class="common-button "> css引用 </div> <button class="button">button </button> <button class="button"> botton hover </button>復(fù)制代碼

效果圖

2.mark手寫(xiě)遮罩層

.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; }復(fù)制代碼

<div class="mark"></div> <div class="common-button "> css引用 </div> <button class="button">button </button> <button class="button"> botton hover </button>復(fù)制代碼

3.兼容方案

//達(dá)到臨界值時(shí)執(zhí)行的樣式 @media screen and (max-width:360px) and (min-width:321px){}復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5cee26fd6fb9a07f0052bdd0

總結(jié)

以上是生活随笔為你收集整理的css技能你get到了吗？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。