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

盒子插入阴影与deg ...（见例子）

1 个答案:

demo