CSS梦幻背景色

Web前端评论72阅读模式

纯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是中心点的颜色,要与中心部分颜色相同,否则中心点会与其它颜色有区别。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
  • CSS
  • Web前端
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证