添加display:block到img元素以删除下面的填充.这是因为默认情况下img元素是内联呈现的.默认情况下,所有内联块元素都有一些垂直对齐值 – 通过应用vertical-align:top或通过应用display:block重置display属性来重置它.见下面的演示:
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.shadow {
display: inline-block;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.shadow:hover {
-moz-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
}
.shadow img {
max-width: 100%;
position: relative;
z-index: -1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block; /* ADDED */
}
.column {
float: left;
width: 25%;
padding: 0 15px;
}