Question

我想对当前的blockquote进行一些更改。这是我目前的代码：

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>

具有阴影效果的Blockquote

1 个答案: