先從一個需求說起

之前在做界面組件的時候，有很多地方都用到了邊框，我都是順手就打上了 1px 的寬度。但是 MR 上去以后，組里的大佬問我有沒有聽說過一個極細邊框的技術，我就趕緊去 google 了一下，發現這個概念原來很早就有了。早在 2014 的 WWDC 上面 Ted O’Connor 就討論過有關 “retina hairlines” 的技術，可以實現比 1px 還細的邊框。

背景

需求預溝通

• 產品：我們需要做一個 IM，和微信一樣
• 我：打擾了，走錯片場了，你們繼續，，，，，，，
• ....
• 我：這個需求雖然不合理，但是我還是接了。。。。。。

背景

某天老板在群里反饋，英文單詞為什么被截斷了？ 

很顯然，這是我們前端的鍋，自行背鍋。這個問題太簡單了，css 里加兩行屬性，分分鐘搞定。

開心的提交代碼，刷新頁面。我擦，怎么還是沒有斷詞？不可能?。。?！ 難道這兩個屬性有什么兼容性問題或者有什么限制條件？為了不搬石頭砸自己的腳，還是去深入了解一下。

熟悉前端的人都會聽過 css 的偽類與偽元素，然而大多數的人都會將這兩者混淆。本文從解析偽類與偽元素的含義出發，區分這兩者的區別，并且列出大部分偽類與偽元素的具體用法，即使你有用過偽類與偽元素，但里面總有一兩個你沒見過的吧。

1. 偽類與偽元素

先說一說為什么 css 要引入偽元素和偽類，以下是 css2.1 Selectors 章節中對偽類與偽元素的描述：

CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree.

前言

提到 rem，大家首先會想到的是 em，px，pt 這類的詞語，大多數人眼中這些單位是用于設置字體的大小的，沒錯這的確是用來設置字體大小的，但是對于 rem 來說它可以用來做移動端的響應式適配哦。

兼容性

前言

現在設計師同學越來越高大上了，純色背景已經不能滿足人民群眾日益增長的物質文化需要了，必須整漸變背景 o(╯□╰)o。怎么還原呢，設計師直接丟過來一個幾十 K 的圖片，這怎么行。。。

還好我們有 CSS 第三代！這次就來嘮嘮 CSS3 Gradient(/?gre?d??nt/) 的用法。

每次必說題外話

話說貌似好久沒有寫技術文章了，自從娃娃出來后，很少能有時間做技術研究，思考的時間也不足。不過有得必有失，世上事也就醬紫了。但是作為一個前端攻城師，不寫代碼，不研究技術，是會被后浪拍死在沙灘上的。

碰巧前段時間碰到個 CSS 問題，一直很喜歡 CSS 的，能 CSS 解決的問題絕對不用 JS，于是就抽時間整整看。

什么是斜線拼接

回到本文主題上，” 斜線拼接“ 是我自創的詞語，因為我也不知道怎么描述這個需求，o(╯□╰)o，實際的效果是下面所示：

眼力好的筒子應該就能發現，上面這張圖是兩個帥鍋拼接在一起的，看中間的斜線。

但是呢，剛接到這個需求的時候，開發是抓狂的—— 第一反應就是用 canvas 畫圖，這得多累啊，只是要顯示張圖片而已，竟然還要動用一坨 JS，O__O "…

不過依稀記得，CSS 貌似有個遮罩的特性，可以實現圖片的部分顯示的效果的。

日常開發中，我們常用:before,:after 來實現一些效果，比如

     雖然現在互聯網的網速越來越快，但永遠都跟不上我們生活節奏的加快。資深網癮少女表示，這世上最刺眼的不是陽光，而是“ 正在加載”；最長的不是周杰倫的電影，而是“ 正在加載”；最痛心的事情不是你不愛我，而是“ 正在加載”（語文老師告訴我排比要至少寫三句）。

這是為什么呢

為什么 loading 讓我們如此痛苦呢？

因為，我們看到的 loading 是這樣的是這樣的顏值再高一點的是這樣的。

這就是為什么要叫他們“ 菊花”，就因為長得丑啊喂！

我們要在這個看臉的世界活下去?。?！

CSS 類名總是作用在同一的全局作用域里面。

任何一個跟 CSS 有長時間打交道的開發者，都不得不接受 CSS 那具有侵略性的全局特性，明顯地這是一種文檔流時代的設計模型。而對于今天現代 web 應用，更應該積極提出一種更健全的樣式環境。

每一個 CSS 類名都有可能與其它元素產生的意想不到副作用，又或者產生沖突。更令人吃驚的是，我們的 class 的效果可能在全局作用域的互相影響下（原文這里比喻為全局唯一性戰爭），最終在頁面上產生很少的效果或者根本沒有效果。

任何時候我們改變一個 CSS 文件，我們都需要小心翼翼地考慮全局環境是否產生沖突。沒有其他前端技術是需要如此之多的規范和約束，而這僅僅是為了保持最低級別的可維護性。