仅CSS旋转没有原始元素的盒子阴影 [英] Only CSS rotate box-shadow without original element
本文介绍了仅CSS旋转没有原始元素的盒子阴影的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个小问题,我想为图片创建45度阴影。但是,如果我使用代码,我的对象也会旋转。因此,我想寻求有关此问题的帮助。
I have a small problem, I want to create 45 degree shadow for a picture. But if I use my code my object is rotating too. So I would like to ask for help with this problem.
我的代码:
.item {
box-shadow: -50px 80px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
推荐答案
仅使用CSS的最灵活的答案可能是这样的:
Most flexible answer using only CSS is probably this:
.item {
position: relative; /* or absolute */
}
.item:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
box-shadow: -50px 80px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
这篇关于仅CSS旋转没有原始元素的盒子阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文