box-shadow页面立体效果

兼容:box-shadow支持IE9+

box-shadow通过水平垂直阴影实现立体效果

li{
	250px;
	height:250px;  
	border-radius: 50%;
	box-shadow:0 15px 35px rgba(0,0,0,0.1);
	background: url('./ZD.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	display: inline-block;
} 

  

延伸:box-shadow 可以设置多条属性,用逗号分隔,产生多层阴影效果

box-shadow:0 15px 35px rgba(0,0,0,0.1),0 3px 10px rgba(0,0,0,0.07);

可以通过这个网址

  https://www.html.cn/tool/css3Preview/Box-Shadow.html

快速调试阴影效果

  

 

 

原文地址:https://www.cnblogs.com/webwangjie/p/11283815.html