不對稱CSS Shadow

Question

如何創建一個像這樣的陰影？ 只在底部的角落和漸變。

Answer 1

使用你的CSS像如下。

HTML

<div class="box mybox"> 
    <h3>My Box</h3> 
</div> 

CSS

.box h3{ 
 
\t text-align:center; 
 
\t position:relative; 
 
\t top:80px; 
 
} 
 
.box { 
 
\t width:70%; 
 
\t height:200px; 
 
\t background:#FFF; 
 
\t margin:40px auto; 
 
} 
 

 
/*================================================== 
 
* MyBox 
 
* ===============================================*/ 
 
.MyBox 
 
{ 
 
    position: relative; 
 
} 
 
.MyBox:before, .MyBox:after 
 
{ 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width:300px; 
 
    background: #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    transform: rotate(-3deg); 
 
} 
 
.MyBox:after 
 
{ 
 
    transform: rotate(3deg); 
 
    right: 10px; 
 
    left: auto; 
 
}

<div class="box MyBox"> 
 
\t <h3>MyBox</h3> 
 
</div>

Answer 2

試試看到這一點。似乎是你搜索。

http://codepen.io/jcorpus/pen/xbExKL

有例子陰影，還有就是你搜索。

HTML

<div class="wrap"> 
    <div class="box box1 shadow1"> 
    <h3>Shadow 1</h3> 
    </div> 
</div> 

CSS

body{ 
    background:#E6EEF6; 
} 
.wrap{ 
    margin-left:20px; 
} 
.box{ 
    width:40%; 
    height:200px; 
    float:left; 
    background-color:white; 
    margin:25px 15px; 
    border-radius:5px; 
} 
.box h3{ 
    font-family: 'Didact Gothic', sans-serif; 
    font-weight:normal; 
    text-align:center; 
    padding-top:60px; 
    color:#fff; 
} 
.box1{ 
    background-color: #EBA39E; 
} 
.shadow1{ 
    position:relative; 
} 
.shadow1{ 
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset; 
} 
/*****************************************************************dashed border 
****************************************************************/ 
.shadow1 h3{ 
    width:87%; 
    height:100px; 
    margin-left:6%; 
    border:2px dashed #F7EEEE; 
    border-radius:5px; 
} 

.shadow1:before, .shadow1:after{ 
    position:absolute; 
    content:""; 
    bottom:12px;left:15px;top:80%; 
    width:45%; 
    background:#9B7468; 
    z-index:-1; 
    -webkit-box-shadow: 0 20px 15px #9B7468; 
    -moz-box-shadow: 0 20px 15px #9B7468; 
    box-shadow: 0 20px 15px #9B7468; 
    -webkit-transform: rotate(-6deg); 
    -moz-transform: rotate(-6deg); 
    transform: rotate(-6deg); 
} 
.shadow1:after{ 
    -webkit-transform: rotate(6deg); 
    -moz-transform: rotate(6deg); 
    transform: rotate(6deg); 
    right: 15px;left: auto; 
} 

Answer 3

<div class="box effect3"> 
<h3>Effect 2</h3> 
</div> 

    .box h3{ 
    text-align:center; 
    position:relative; 
    top:80px; 
} 
.box { 
    width:70%; 
    height:200px; 
    background:#FFF; 
    margin:40px auto; 
} 

.effect3 
{ 
    position: relative; 
} 
.effect3:before 
{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    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); 
}