在HTML中添加图片阴影 html – 如何在CSS中为图像添加内部阴影[复制]

添加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;

}