如何在元素内创建阴影

Question

我一直试图找到一种在图像内部留下阴影的方法，但我只能管理一个外部阴影。 .showSlide是一个div元素btw

.showSlide {
display: block;
width:100%;
height:350px;
}

.showSlide img {
width: 100%;
height:100%;
border-radius: 15%;
-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;
}

Answer 1

添加：

.showSlide::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 15%;
-moz-border-radius: 15%;
border-radius: 15%;
box-shadow: inset 0 0 12px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 12px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}

并编辑：

.showSlide {
display: block;
width:100%;
height:350px;
position: relative;
}

.showSlide img {
width: 100%;
height:100%;
border-radius: 15%;
}