记录一个看着比较顺眼的blockquote的css装饰

最新推荐文章于 2025-06-06 23:15:16 发布

原创最新推荐文章于 2025-06-06 23:15:16 发布 · 603 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#blockquote

Misc. 专栏收录该内容

9 篇文章

订阅专栏

博客内容展示了如何使用CSS创建吸引人的引用区块设计，提供了一个具体的样式代码，并提到了参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下

blockquote {
    position: relative;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #9dd4ff;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}