本期技術週刊一起了解 CSS，歡迎大家閲讀 ～

文章推薦

萬能的 CSS 漸變！單標籤繪製一個足球場 // XboxYan

世界盃正在進行中，也不要忘記學習 CSS，比如，用 CSS 繪製一個足球場？

一眼望去，這裏的形狀只有圓形和矩形，在不借助其他標籤的情況下（包括偽元素），其實很容易聯想到漸變，一起看看如何繪製的吧，有非常多的漸變小技巧~

温馨提示：文章中帶有“⚽️”的描述屬於足球小知識，不感興趣的可以跳過，與 CSS 無關

CSS 如何設置自動滾動定位的“安全”間距？ // XboxYan

• 默認情況下自動滾動定位都是與滾動容器貼邊的，有時候並不美好
• scroll-padding和scroll-margin可以在自動滾動定位時預留指定的間距
• scroll-margin作用對象是目標元素，scroll-padding作用對象是滾動容器
• 滾動定位方式有錨點定位、scrollIntoView定位、focus定位、還有Scroll-snap定位
• 體驗增強屬性，兼容性還不錯，主要是safari拖後腿

基於一段神奇的 CSS 漸變製作噪點效果 // 南城FE

提及噪點效果，首先想到的就是以前的舊電視機信號不穩定時或者畫面不穩定時的效果。如果你沒有看過那種舊電視，可以看下面的 gif 動圖，真實的情況噪點的變化速度會快很多，這裏為了 gif 的大小，截取的時間較短供參考。

這就是今天文章的主題，我們要基於 CSS 來實現這個效果。當然除了 CSS 之外，使用 SVG，canvas 之類的也是可以實現的，本文使用 CSS 漸變的一個技巧，但在實際的項目中要斟酌使用，且此效果在不同的瀏覽器中會所不同。

快速構建頁面結構的 3D Visualization // chokcoco

本文，就將介紹一種，快速通過 CSS，構建頁面深度關係的 3D 視圖，快速清晰的釐清頁面 DOM 層級及深度之間的關係。並且可以運用在不同的節點單獨進行觀察。

當然，總體而言，是基於：CSS 選擇器、CSS 3D 屬性的一次大規模綜合應用，整體看完，相信你能學到不少東西。

23 個 CSS 動畫效果，持續更新中 ... // 水冗水孚

使用方式：

• 看名稱效果圖，有沒有和自己想要的效果類似的
• 有的話，複製粘貼代碼使用
• 也可以自己修改一下
• css效果並不是特別難，只是有時候我們可能想不到
• 筆者空閒時間，會繼續更新的哦，點贊關注不迷路^_^

注意：一些代碼思路，筆者寫在代碼註釋中去了

兩行 CSS 讓頁面提升了近 7 倍渲染性能！ // 南玖

對於前端人員來講，最令人頭疼的應該就是頁面性能了，當用户在訪問一個頁面時，總是希望它能夠快速呈現在眼前並且是可交互狀態。如果頁面加載過慢，你的用户很可能會因此離你而去。所以頁面性能對於前端開發者來説可謂是重中之重，其實你如果瞭解頁面從加載到渲染完成的整個過程，就知道應該從哪方面下手了。

嗯，不要跑偏了，今天我們主要來研究長列表頁面的渲染性能

問答推薦

• 想請問大家一個關於 flex 佈局方面的問題 ？
• CSS 樣式的問題？
• CSS 如何對 class 進行分類？
• html、css 怎麼實現一個圓盤（類環形圖）？
• 漸變背景，帶透明分隔，請問怎麼實現圖片效果？
• 問一個關於 css 選擇器使用的問題？
• 前端頁面 div 上有凹下去的梯形效果怎麼實現？
• 怎樣讓圓形盒子裏的 a 標籤居中呀？

# SegmentFault 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。

每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。

如有問題可以添加小姐姐微信~