您的位置: 开心技术乐园 > 技术仓库 > 编程技术 > 阅读文章

WordPress blockquote 标签加双引号、边框、阴影等效果的CSS

  其实本文跟 WordPress 没什么关系,blockquote 是一个通用的标签,也叫“块引用”。blockquote 标签内的所有内容会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。通俗来讲,就是 HTML 标签语义化的体现,意思是该标签内的内容是引用的(如名言警句、软件介绍等)而通常会有特定的前端样式。

  如何自定义 Wordpress 里的 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"; */
}
    • 本文标签:
    • 人气热度:677
    • 生产日期:2019年3月06日 - 16时30分35秒

    error: Content is protected !!