DIV CSS 佈局教程網

這篇文章主要介紹了用一個DIV畫圖通過background-image疊加實現，通過 radial-gradIEnt 徑向漸變，需要的朋友可以參考下 這些圖片都是用一個DIV繪制出來的，其實原理並不復雜。



這些圖片都是由CSS繪制出來的，通過background-image疊加實現，

如蘑菇頭的實現，通過 radial-gradient 徑向漸變 , linear-gradIEnt 線性漸變相互疊加實現，如：

復制代碼代碼如下:
div {
width: 170px;
height: 140px;
background-image:
radial-gradIEnt(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
linear-gradIEnt(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
radial-gradIEnt(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
radial-gradIEnt(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
radial-gradIEnt(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
linear-gradIEnt(to bottom, #ef0015 20%, #b2000c 100%);
border-radius: 140px 140px 80px 80px;
}

同時有前後遮擋關系的通過:before和:after偽元素的background-image來實現。

PS: 此種手法對並不完全支持舊版IE