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 關鍵字，能夠一行代碼實現且無反作用

 width: 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

來源：掘金