带阴影效果的块引用

Question

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

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

blockquote.style2 { 背景：#e9e2d0； 左边距：50px； 填充左：15px； 边框顶部：4px 实心#e85e4c； -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; 盒子阴影：0 15px 10px #777; }

HTML

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。