比较经典实用的Blockquote之css样式

在运营网站的过程中，我们发现写文章的时候可能会引用到别人的语句，所以针对这种情况，就要把引用的语句或者段落与自己原创的语句或者段落区分开来，并且可以很醒目的提示这是引用的语句。下面直接放代码：

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
 
  /*字体*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
 
  /*边框 - (选项)*/
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;
 
  /*盒子阴影 - (选项)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
  content: "\201C"; /*左双引号的Unicode编码*/
 
  /*字体*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
 
  /*位置*/
  position: absolute;
  left: 10px;
  top:5px;
}
blockquote::after{
  content: ""; /*如果要显示右双引号，则写 content: "\201D"; */
}

上面一段代码是比较经典和实用的Blockquote的css样式，不过笔者在此要指出一些问题或者瑕疵了。

上面这段代码主要的问题就在content部分，说是直接用Unicode编码就可以了，比如双引号直接用：\201C、\201D，但实际上经过测试发现，在有些情况下，该编码无法正常转义，所以笔者建议直接用中文双引号显示“”就可以正常显示双引号了。

如果喜欢简洁一点，像边框和盒子阴影这两个选项可以不要，整体的代码如下：

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
 
  /*字体*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
}
blockquote::before{
  content: "“"; /*左双引号的直接用中文左双引号*/
 
  /*字体*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
 
  /*位置*/
  position: absolute;
  left: 10px;
  top:5px;
}
blockquote::after{
  content: ""; /*如果要显示右双引号，则写 content: "”"; */
}

最后放一张效果图吧

相对来说这是比较简洁的了，然后再想效果好一点，可以加border（边框）、box（盒子）样式，还可以改改line-height（行高）、padding（边距）、font（字体）、color（颜色）等，总之得到自己想要的效果是不难滴！