css - 带阴影效果的 block 引用

Question

我想对我当前的 block 引用进行一些更改。这是我当前的代码:

Css:

blockquote.style2 {
background:#e9e2d0;
margin-left: 50px;
padding-left: 15px;
border-left:4px solid #e85e4c;
}

HTML:

<blockquote class="style1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</blockquote>    

我想在“顶部”(而不是左侧)添加红色边框，并添加此处显示的阴影效果 #2:http://www.paulund.co.uk/creating-different-css3-box-shadows-effects .这是框阴影的代码:

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


.effect2
{  position: relative;   }

.effect2:before, .effect2:after
  {     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);
}
.effect2:after   {
  -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
 right: 10px;
 left: auto;
}

HTML:
<div class="box effect2">
<h3>Effect 2</h3>
</div>

任何帮助将不胜感激!谢谢。

Answer 1

根据您为我提供的内容，您只需添加阴影效果并将边框切换到顶部即可。

CSS

<style>blockquote.style2 {  background: #e9e2d0;  margin-left: 50px;  padding-left: 15px;  border-top: 4px solid #e85e4c;  -webkit-box-shadow: 0 15px 10px #777;  -moz-box-shadow: 0 15px 10px #777;  box-shadow: 0 15px 10px #777;}</style>

HTML

<blockquote class="style2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </blockquote>