阴影

作者: lily1314 | 来源:发表于2016-12-03 10:07 被阅读0次

阴影的复习：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