《CSS揭秘》读书笔记6

毛玻璃

书上这毛玻璃讲的思路是对的,但是局限性比较大,最终代码也是错的。

See the Pen glass1 by ShiLei (@nervouself) on CodePen.




上面演示的和书上的有一点不同,伪元素加了一个z-index:-1,意思是把伪元素放到文字下面。书上之前提了,但是最终代码里没有这条;并且书上的底层元素是body,这意味着即使我们把伪元素设为z-index:-1,他还是在body的上面。如果你底图不是body,那就要自己分配好层叠顺序,意味着所有的元素都要变成绝对定位。

## 折角

See the Pen folded-corner by ShiLei (@nervouself) on CodePen.

主要思路是背景右上角利用线性渐变留出一块透明,然后用伪元素照着透明那一块形状翻转对称的做一块被折的角拼在一起。这折角效果是出来了,但是算数学太费劲了。(●’◡’●)