CSS梦幻背景色

纯CSS为背景添加虚幻的圆点。

.revery-bg {
	background-image: 
	radial-gradient(#fff, rgba(172,36,36,.2) 2px, transparent 40px),
	radial-gradient(#fff, rgba(172,36,36,.15) 1px, transparent 30px),
	radial-gradient(#e3f7fb, rgba(21,193,221,.12) 2px, transparent 40px),
	radial-gradient(#f6e9e9, rgba(172,36,36,.1) 2px, transparent 30px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

用于装饰小尺寸的DIV背景色效果还是不错。

其中radial-gradient(#fff, rgba(172,36,36,.2)，前面的#fff是中心点的颜色，要与中心部分颜色相同，否则中心点会与其它颜色有区别。