box-shadow模擬outline的圓角效果
我們平時使用box-shadow最多的是前面3個參數，水平/垂直偏移以及模糊大小，可能有一些小伙伴并不清楚其第4個可選參數值究竟有何用？box-shadow第4個參數值，名外擴展，可以把投影范圍擴大，當然，擴大的區域是實色區域。我們就可以利用這一特性，模擬實現不影響元素占據尺寸的outline實色邊框效果啦！
如：
img {
border-radius: 1px;
box-shadow: 0 0 0 30px #cd0000;
}
下面簡單解釋下兩行CSS代碼的含義：
border-radius: 1px表示圓角大小1像素。有同學可能奇怪了，怎么是1像素啊，截圖圓角明明好幾十像素，下面正好就解釋了；
box-shadow: 0 0 0 30px #cd0000出現了4個數值，分別是水平偏移0, 垂直偏移0，模糊0(純色), 擴展大小30像素。我們可以想象成，光線直接從盒子的正上方照下來，因為沒有偏移沒有模糊，我們看不到任何陰影。實際上，盒子的陰影正好就是盒子的大小（外帶1像素圓角），此時，擴展30像素，我們可以腦補一下，1像素圓角的陰影再擴展30像素。喲，不就是我們需要的效果嘛，不就是截圖展示的效果嘛！
知道border-radius 1像素的左右了吧，擴展30像素后，圓角就是30像素大小了。
然而，雖然肉眼看不出來，上面的方法實際有瑕疵，因為圖片不是純正的直角，有1像素的圓角。如果你想實現完美的內方外圓的效果，可以套一層標簽，外面的標簽使用border-radius和box-shadow就可以了。
