你可能不知道的 css tricks

文章中的內容，來自於 EVEN MORE CSS SECRETS by Lea Verou

混合模式

如何實現下面的文字鏤空效果？

答案很是簡單，使用 mdn mix-blend-mode，效果能夠在 這裏查看。這個屬性不太經常使用，但若是不考慮 IE 瀏覽器的話， 兼容性仍是很可觀的。詳細瞭解這個屬性，能夠參照張大師的文章 CSS3混合模式。

代碼以下：

<div class="container">
 <h2>CSS is awesome!!<br/>CSS is awesome!!<br/>CSS is awesome!!</h2>
</div>
複製代碼

.container {
 background-image: url(https://images.unsplash.com/photo-1465533403411-0af6ede250dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80);
 width: 300px;
 height: 500px;
 display: flex;
 align-items: center;
 justify-content: center;
}
h2 {
 width: 250px;
 color: black;
 background: white;
 mix-blend-mode: screen;
 text-align: center;
}
複製代碼

背景圖可使用 svg

各類購物網站的評分星級用 CSS 如何實現？購物網站的評分通常是整數分或者是 x.5 的評分標準，即便評分是2.3分，展現的通常也是2 分的效果。好比下面這張圖，是豆瓣電影的評分背景圖，經過控制背景位置實現效果：

而若是要實現下圖中的 x.1，x.2，甚至是 x.233 的真實的展現效果的話，背景圖的方式就不可用了。

HTML 中又一個不經常使用的標籤 meter,兼容性幾乎滿分，搭配使用 svg 背景圖，能夠很是方便的實現打分效果。實現效果能夠在這裏查看。代碼以下：

<meter min="0" max="5" value="2.233"></meter>
複製代碼

meter {
  width: 5em;
  height: 1em;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\ <text font-size="100" fill="tan" y=".8em" opacity="0.3">★</text>\ </svg>') 0px center / auto 100%;
}
meter::-webkit-meter-optimum-value {
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\ <text font-size="100" fill="tan" y=".8em" >★</text>\ </svg>')  0px center / auto 100%;
}
meter::-webkit-meter-bar {
    background: transparent;
}
複製代碼

若是把 ★ 替換爲 💩，咱們能夠表示一部電影有多shi~；

focus-within 實現鍵盤可訪問的下拉列表

:focus-within 是一個CSS 僞類 ，表示一個元素得到焦點，或，該元素的後代元素得到焦點。換句話說，元素自身或者它的某個後代匹配 :focus僞類。詳細介紹可查看 MDN。不少同窗應該都寫過純 CSS 實現的 hover 時，展現下拉列表；但若是要實現鍵盤（TAB 鍵）訪問，只用 :hover 就沒法實現了；focus-within 應用實例

響應式的 flex

大屏幕上左右兩欄佈局，小屏幕上上下佈局，使用 flex 的話，不須要使用媒體查詢，一個小demo。

僞元素能夠搭配 flex 使用

::after ::before 元素，也能夠做爲 flex 元素的子元素。搭配使用的話，某些時候能夠省去多餘的標籤。

參考連接：

1.mdn mix-blend-mode

2.CSS3混合模式

3.EVEN MORE CSS SECRETS by Lea Verou