box-shadow页面立体效果

兼容：box-shadow支持IE9+

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

li{
	width: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