利用background-image裡的liner-gradient屬性可以實現一些簡單的css網格背景，能自適應背景，挺實用的，下面就簡單的介紹兩款網格背景
1.桌布花紋
紅.png
**塊height:300px;
width:300px;
background:white;
background-image:linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size:30px 30px;
2.藍圖網格
藍色.png
**塊height: 300px;
width: 300px;
background:#58a;
background-image: linear-gradient(white 2px,transparent 0),
linear-gradient(90deg, white 2px,transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
background-size:75px 75px,75px 75px,15px 15px,15px 15px;
CSS3實現載入效果
預期實現的效果如下如所示 首先基本的html布局如下 對於的css 如下 首先設定一下基本的樣式 wrap wrap div 完成上面的css樣式定義後，頁面上就會有五個排列整齊的小細條了。然後我們來新增動畫效果 在 wrap div加入如下 webkit animation fadeout 1s ...
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...
CSS3實現打勾 效果
樣式屬性 關於打勾 效果，應該都不陌生。eg 我們在某些商場，支付的時候，支付成功會有個成功的標識，就像下面這樣 我們看，這個效果的html結構 標籤作為畫布 標籤來畫 外圍的圓 標籤來畫 屬性 fill none 設定背景顏色為無色 stroke 68e534 設定圓的主題顏色 同 stroke ...