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

快速调试阴影效果

  

 

 

猜你喜欢

转载自www.cnblogs.com/webwangjie/p/11283815.html