shadow - 带有 deg.. 的框内嵌阴影(参见示例)

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); 
}

demo