shadow - 带度数的框内嵌阴影..（参见示例）

Question

当我在 css 中处理一些图片布局时，我想到了在我的图像上添加一个盒子阴影。问题是互联网上无处可寻，或者根据我自己的知识，我找不到问题的答案。

在这里，您可以看到具有我想要使用 CSS3 框阴影插图获得的效果的 iPhone。 http://en.wikipedia.org/wiki/IPhone_5

有谁知道怎么做这个？也欢迎提示！提前致谢。

Answer 1

诀窍是在伪元素中设置带有渐变图像的叠加层。

可以旋转此叠加层以提供锐利的截止，并且父溢出将其保持在矩形内

#test {
  height: 390px;
  width: 200px;
  background-color: blue;
  position: absolute; 
  overflow: hidden;
}


#test:after {
  content: "";
  position: absolute; 
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  -webkit-transform: rotate(-28deg) translateX(75%) translateY(-10%);
  -moz-transform: rotate(-28deg) translateX(75%) translateY(-10%);
  transform: rotate(-28deg) translateX(75%) translateY(-10%);
  background-image: -ms-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
  background-image: -moz-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
  background-image: -webkit-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
   background-image: linear-gradient(208deg, rgba(250,250,250,0.85) 50%, transparent); 
}

演示