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

總結

以上是生活随笔為你收集整理的css技能你get到了吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。