Question

我试图将div的阴影设置为左上角和右上角，但仅通过改变天使的程度就无法工作......

小提琴就在这里

我得到的是

.box h3{
  text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

<div class="box effect4">
<h3>Effect 4</h3>
</div>

Answer 1

如果你将每个值（定位/盒子阴影/旋转）转向相反的方向，你会得到一个阴影位于顶部的结果：

http://jsfiddle.net/2nmgB/2/

变化

top: 80%;
bottom: 15px;
box-shadow: 0 15px 10px #777;
transform: rotate(3deg);

到

top: 15px;
bottom: 80%;
box-shadow: 0 -15px 10px #777;
transform: rotate(-3deg);

<强>更新

如评论中所述，您希望它正确且左：

只需添加第二个伪元素（::before）并相应地放置它：

http://jsfiddle.net/2nmgB/4/

right: auto;
left: 10px;
transform: rotate(-3deg);

休息与::after - 元素

相同

Answer 2

只需使用负像素偏移。

EXAMPLE

div {
    width: 150px;
    height: 150px;
    box-shadow: -5px -5px 5px gray;
    border: 1px solid black;
}

Answer 3

JSFiddle链接：http://jsfiddle.net/vinoddalvi/828fZ/1/

.box h3{
  text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
.effect4
{
    position: relative;
}
.effect4:after {
    z-index: -1;
    position: absolute;
    content: "";
    top: 20px;
    left: 2px;
    right: auto;
    width: 30%;
    height: 50%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(85deg);
    -moz-transform: rotate(85deg);
    -o-transform: rotate(85deg);
    -ms-transform: rotate(85deg);
    transform: rotate(85deg);
}
.effect4:before
{
    z-index: -1;
    position: absolute;
    content: "";
    top: 20px;
    right: 2px;
    left: auto;
    height:50%;
    width: 30%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 -15px 10px #777;
    -moz-box-shadow: 0 -15px 10px #777;
    box-shadow: 0 -15px 10px #777;
    -webkit-transform: rotate(95deg);
    -moz-transform: rotate(95deg);
    -o-transform: rotate(95deg);
    -ms-transform: rotate(95deg);
    transform: rotate(95deg);
}
<div class="box effect4">
<h3>Effect 4</h3>
</div>

Answer 4

尝试此代码并相应更改类名

<div class="class_box_shadow">Your code here <div class="sh_top_left"></div><div class="sh_bottom_right"></div></div>

你的css风格

.class_box_shadow{
    width: 374px;
    min-width: 200px;
    min-height: 130px;
    margin: auto;
    background: #ccc;
    border: 5px solid white;
    position:relative;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
}
.sh_top_left{
    width:150px; height: 80px;
    position:absolute;
    left: 0; top:0;
    z-index:-2;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: -20px -30px 10px rgba(0, 0, 0, 0.37);
    -moz-box-shadow: -20px -30px 10px rgba(0, 0, 0, 0.37);
    -webkit-box-shadow: -20px -30px 10px rgba(0, 0, 0, 0.37);
    -webkit-transform:skew(10deg,10deg) translate(45px,20px);
    transform:skew(10deg,10deg) translate(45px,20px);
    -moz-transform:skew(10deg,10deg) translate(45px,20px);
}
.sh_bottom_right{
    content: "";
    position:absolute;
    right: 0; bottom:0;
    width:150px; height: 100px;
    z-index: -1;
    background: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.37);
    -webkit-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.37);
    box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.37);
    -moz-transform:skew(10deg,10deg) translate(-45px,-15px);
    -webkit-transform:skew(10deg,10deg) translate(-45px,-15px);
        transform:skew(10deg,10deg) translate(-45px,-15px);
}

您可以访问此网站以创建自己的自定义投影。 http://www.themeshock.com/css-drop-shadow/

盒子阴影效果就在左上角和右上角

4 个答案: