CSS揭秘实用技巧总结

巧用层叠上下文

• 关键实现： 伪元素 层叠上下文
• 具体分析： 利用层叠上下文和 z-index: -1 特性实现伪元素覆盖背景同时又不会遮挡文字（具体实现原理参考这里 ）。这是一个非常常用又好用的技巧，善加利用可以达到很多意想不到的效果。

position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;

边框内圆角

• 关键实现：伪元素 层叠上下文
• 具体分析：利用伪元素实现圆角矩形并叠加在父元素的背景之上文字之下

clip-path

• 关键实现： clip-path
• 具体分析：css3 新属性 clip-path 可以实现区域裁剪，现在浏览器支持较好的有三个函数：clip-path: circle(50px at 50px 50px) 以 50px 50px 的地方为圆心裁剪一个半径 50px 的圆；clip-path: ellipse(30px 40px at 50px 50px) 以 50px 50px 的地方为圆心裁剪一个横向半径 30px，纵向半径 40px 的椭圆；clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) 按照多个坐标剪裁一个多边形，此处是菱形。有了 clip-path，就可以轻易的实现任意多边形了

自适应的椭圆

• 关键实现：border-radius
• 具体分析：border-radius 竟然可以设置 8 个角的半径～ 其中水平方向（对角线上下有弧度的地方）和垂直方向（对角线左右有弧度的地方）各四个，可以用 / 分割。如果水平或垂直方向指定的值少于四个，则会按照和 margin、padding 一样的规则重复。如果只指定来水平方向的，那么垂直方向的跟水平方向的一样。

  border-radius: 5em 1em; /*相当于border-radius: 5em 1em 5em 1em / 5em 1em 5em 1em;*/

自适应宽度

• 关键实现：min-content关键字
• 具体分析：如何实现一个元素的宽度根据后代元素的最大固定元素宽度自适应呢？绞尽脑汁，也只能利用 display: inline-block 的包裹特性实现一个不完全的版本。这种方法的缺陷是文本脱离了文档流，高度未计入包含块。但是如果利用 min-content 关键字，可以一行代码实现且无副作用

  min-content;

不规则投影

• 关键实现：filter: drop-shadow()
• 具体分析：box-shadow 不能透过透明背景显示出来，不能越过伪元素/子元素显示出来，而这些drop-shadow能做到。（但无论哪种投影都会被clip-path剪裁掉～～）

 filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

棋盘

• 关键实现：background-image、background-size、background-position
• 具体分析：给多个渐变设置不同的大小、位置，可以实现网格的效果。

  background: #eee;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;

总结

总体来说，《css揭秘》这本书并没有给我带来太大惊喜，个人感觉不如阅读《css世界》带来的收获多。当然了，这本书属于纯技巧型的，并没有讲述很多原理知识，所以也不能苛责吧。有兴趣的同学可以跟着我学习一波 css世界，相信肯定会有更大的收获

文本原出处链接：https://juejin.im/post/5e0fef935188253a624a6a72

来源：掘金