之前說的條紋全部都是有規律的條紋，如果實現隨機寬度的垂直條紋呢
其實原理
a)寬度盡量選擇質數，因為質數跟任何其它數字都是相對質數
b)因為最頂層貼片的重複規律最容易被察覺（它沒有被任何東西遮擋），我們應該把平鋪間距最大的貼片安排在最頂層
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;
如下所示：
具體效果見鏈結
同樣利用這個原理可做乙個隨機效果的loading
@keyframes spin
}@keyframes radius
}@keyframes color
66%
}@keyframes width
}.loading:before
.loading
body
loading…
總結：這個方法不僅適用於背景， 還可以用於其他涉及有規律重複的情況。
CSS揭秘之《條紋背景》
先來說說漸變吧 background linear gradient fb3 20 58a 80 效果圖如下所示 也就是說真正的漸變只出現在容器 60 從20 到80 的高度區域 如果把兩個色標合在一起，會怎樣呢 w3c是這樣規定的 如果多個色標具有相同的位置，它們會產生乙個無限小的過渡區域，過渡的...
《css揭秘》之背景與邊框
這本書是魔法哥的譯著，也是買了有很長時間了，現在開始慢慢閱讀，確實比較新穎，包含了很多css方面的小tips。來一點點的做個總結。關於半透明我們可能會想到使用rgba,opacity等等，對於背景提供回退方案還是比較好做的，要麼利用一張單畫素半透明，要麼回退到實色。但是對於其他屬性，比如邊框我們就只...
CSS揭秘 條紋背景
不管是線性漸變，還是徑向漸變。它們都是用來設定元素的背景影象。background image屬性可以為乙個元素設定乙個或者多個背景影象。這些影象在繪製過程中，以z方向堆疊的方式進行，也就是先指定的影象會在後指定的影象上面繪製，也就越接近使用者。元素的border會在背景影象之上繪製 別忘了前面講的...