0

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

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 -阴影效果。这是盒子阴影的代码：

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>

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

4

1 回答 1

0

With exactly what you provided for me, here's what you need to do to add just the shadow effect and switch the border to the top.

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>
于 2013-10-02T21:04:51.293 回答