原理：給偽類新增背景利用線性漸變實現，然而背景漸變一次只能實現乙個切角，因此，上圖其實是由4個不同方向上的的背景實現的。
"corner"
>
.corner
linear-gradient(135deg, transparent 15px, deeppink 0) top left中135deg指的是漸變發生在左上角，關於這個角度問題不明白了可參考下面這篇講折角的部落格，事實會讓你明白：接著 transparent 指的是以透明顏色開始渲染15px，deeppink 0這裡的0指的是從15px開始處用deeppink渲染剩下的區域。而剩下的區域是那些呢？由於設定以下**：
background-size: 50% 50%;
background-repeat: no-repeat;
css3價格斜切 css3 斜切角 斜邊的實現方式
設計圖含有斜切角的效果時，我們一般想到的方法是切出四個角為背景，然後用border連起來，這樣就能顯示出該效果了，那麼直接使用css呢？下面就整理css做斜邊的效果。1 方案一 利用linear gradient.chamfer background 3b3 background linear gr...
CSS3 新增偽類
p first of type 父元素中第乙個p子元素 p lastt of type 父元素中最後乙個p子元素 p only of type 父元素中唯一乙個p子元素 p nth of type n 父元素中第n個p型別的p元素 p nth last of type n 父元素中倒數第n個p型別的...
CSS3 新增偽類
p first of type 選擇屬於其父元素的首個 元素的每個 元素。p last of type 選擇屬於其父元素的最後 元素的每個 元素。p only of type 選擇屬於其父元素唯一的 元素的每個 元素。p only child 選擇屬於其父元素的唯一子元素的每個 元素。p nth c...