你可能不知道的 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