当我在 css 中处理一些图片布局时,我想到了在我的图像上添加一个框阴影。问题是在互联网上的任何地方,或者根据我自己的知识,我都无法找到我的问题的答案。
在这里你可以看到我想要用 CSS3 框阴影插入得到的效果的 iPhone。 http://en.wikipedia.org/wiki/IPhone_5
有人知道怎么做吗?也欢迎提示!提前致谢。
最佳答案
诀窍是在伪元素中设置带有渐变图像的叠加层。
这个叠加层可以旋转以提供锐利的截断,父溢出将它保持在矩形内
#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
关于shadow - 带有 deg.. 的框内嵌阴影(参见示例),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19976728/