box-shadow

平时开发都是敲代码直接看效果，根本没去留意第三第四个值代表什么意思，今天捋一捋，box-shadow可以实现的效果挺多的，只要你敢想象

双重阴影实现拍照效果：

代码：

div {
    width: 400px;
    height: 266px;
    margin: 50px auto 0;
    box-shadow: 0 0 0 5px rgb(16, 238, 190),
                0 0 0 10px #fff,
                -15px -15px rgb(224, 144, 144),
                15px 15px  rgb(224, 144, 144);
}
img {
    width: 100%;
   
}
<div>
    <img src="./images/photo.jpg" >
</div>

第三个值和第四个值的区别

 box-shadow: 0 0 5px 0 #ee7513;

box-shadow: 0 0 0 5px #ee7513;

注意 img标签设置阴影 box-shadow: inset 0 0 0 50px red中的inset属性是无效的，所以需要给img裹上一层div

img {
    box-shadow: inset 0 0 0 50px rgb(0, 204, 255); //inset是无效的 
}

以下才是正确写法

div {
      
     	box-shadow: 0 0 0 5px rgb(203, 236, 16) inset;
}
img {
	    width: 100%;
	    position: relative;  //z-index只有在position为relative/absolute/fixed才有效
	    z-index: -1;
}
<div>
        <img src="./images/photo.jpg" >
</div>

效果图：

拍照的效果：双重边框

代码如下：

div {
   width: 200px;
   height: 300px;
   margin: 50px auto 0;
   box-shadow: 0 0 0 5px rgb(16, 238, 190),
               0 0 0 10px #fff,
               -15px -15px rgb(224, 144, 144),
               15px 15px  rgb(224, 144, 144);
}
img {
   width: 100%;
   
}
<div>
     <img src="./images/gougou.jpg" >
 </div>