常見斑馬loading
上圖是我們常見的loading進度條，以前都是用一張背景平鋪的。其實如果拋去相容性因素，我們可以用零純樣式來實現。
一，首先，我們先為容器定義乙個純藍色背景：
box這樣就形成了四等分的條紋，但這顯然不是我們想要的結果。
三，設定傾斜角度。
linear-gradient是可以設定傾斜角度的。
box
這樣貌似達到了我們的預期？其實不是的，現在是無論進度條有多寬，都是百分百填充，視覺上看到的都是四等分。當寬度變短時，同樣是四等分，只是每乙份都變窄了。
四，設定固定尺寸
我們可以將原來背景圖的相對寬度變成純對尺寸。通過background-size來實現
box// 這裡的值視實際情況而定。
這樣，無論進度條寬度發生任何變化，都不會影響斑馬條紋了。
如果想看實際的線上效果，狠戳
其實，只要敢於打破常規，腦洞大開，就可以寫出優雅，健壯，適應性強的**。
CSS3之圓角製作
如今css3中的border radius出現後，讓我們沒有那麼多的煩惱了，首先製作圓角的時間是省了，而且其還有多個優點 其一減少 的維護的工作量，少了對的更新製作，的替換等等 其 二 提高 的效能，少了對進行http的請求，網頁的載入速度將變快 其三增加視覺美觀性。既然border radius有...
CSS3之背景縮放
背景縮放 css3 通過background size設定背景的尺寸，就像我們設定img的尺寸一樣，在移動web開發中做螢幕適配應用非常廣泛。其引數設定如下 a 可以設定長度單位 px 或百分比 設定百分比時，參照盒子的寬高 b 設定為cover時，會自動調整縮放比例，保證始終填充滿背景區域，如有溢...
CSS3資料之邊框
邊框圓角 屬性 border radius 圓角處理時，腦中要形成圓 圓心 橫軸 縱軸的概念，正圓是橢圓的一種特殊情況。如圖所示，我們將四個角標記成1 2 3 4，css裡提供了border radius來 分別設定這些角橫縱軸半徑，以 進行分隔，遵循 1，2，3，4 規則。前面的 1 4個用來設定...