分享4个好看的blockquote引用css样式

虽然现在的主题制作都很精致,但是不管什么主题拿到手,总是有需要修改的地方,我个人最喜欢改的地方就是blockquote样式,而且几乎每篇文章都会用到blockquote标签,以前没有收集的习惯,现在既然有这么个建站资源类的网站,就把自己喜欢的样式收集起来,等到用的时候就不用满网络去找了。

第一个样式

blockquote{
    margin-bottom: 15px;
    margin-left: 1em;
    padding: 3px 0 3px 10px;
    border-left: 6px solid #46bba9;
    background-color: #f6f6f6;
    color: #000;
    font-weight: 300;
    font-size: 1.25em;
    line-height: 2.5em;
}

第二个样式

blockquote{
	background: #d9e9ff;  
	padding: 10px 15px 10px 15px;
	margin: 1em 3em 1em 3em;
	font-size:.8em;
	border-style:dotted dotted dotted solid;
	border-width:1px 1px 1px 5px;
	border-color:#5bbcdd;
	line-height:200%;
}  

第三个样式

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}

第四个样式

{
    margin: 1rem -1rem 1rem -1.2rem;
    padding: .2rem 1rem;
    font-weight: 400;
    border-left: .2rem solid #00a2ff;
    background-color: #f2f6f9;
    font-size: 1.125rem;
    line-height: 2.5rem;
}