文章中的内容，来自于

混合模式

如何实现下面的文字镂空效果？

答案非常简单，使用 ，效果可以在 。这个属性不太常用，但如果不考虑 IE 浏览器的话， 还是很可观的。详细了解这个属性，可以参照张大师的文章 。

代码如下：

    
 
     
CSS is awesome!!
CSS is awesome!!
CSS is awesome!!
    
复制代码

.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 {  width: 5em;  height: 1em;  background: url('data:image/svg+xml,
    
     \    
     
      ★
     \    
    ') 0px center / auto 100%;}meter::-webkit-meter-optimum-value {  background:url('data:image/svg+xml,
    
     \    
     
      ★
     \    
    ')  0px center / auto 100%;}meter::-webkit-meter-bar {    background: transparent;}复制代码

如果把 ★ 替换为 ?，我们可以表示一部电影有多shi~；

focus-within 实现键盘可访问的下拉列表

:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus伪类。详细介绍可查看 。很多同学应该都写过纯 CSS 实现的 hover 时，展示下拉列表；但如果要实现键盘（TAB 键）访问，只用 :hover 就无法实现了；focus-within

响应式的 flex

大屏幕上左右两栏布局，小屏幕上上下布局，使用 flex 的话，不需要使用媒体查询，一个。

伪元素可以搭配 flex 使用

::after ::before 元素，也可以作为 flex 元素的子元素。搭配使用的话，可以省去多余的标签。

参考链接：

1.

2.

3.