阴影

阴影的复习：box-shadow

  • box-shadow:3px 3px 5px 10px #ccc inset;
  • 总共四个参数：
  • 第一个参数：x轴的偏移
  • 第二个参数：y轴的偏移
  • 第三个参数：阴影的模糊程度
  • 第四个参数：阴影的延伸
  • 第五个参数：阴影的颜色
  • 第六个参数：内阴影
  • 内阴影那个参数的位置是可以到前面的，这时有一个案例：掉血 
<head>
          <style>
          div{
                height: 300px;
                width: 200px;
                /* background-color: purple; */
                margin: 100px auto;
                box-shadow: inset 0 0 40px red;
                animation: loose 1s linear infinite;
                 
              }
              @keyframes loose{
                from{
                     box-shadow: inset 0 0 40px red;
                }
                to{
                     box-shadow: none;
                }

         }
         </style>
</head>
  <html>
        <div></div>
 </html>
掉血.gif
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容