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"; */
}