登录 注册

求一个引用样式的 CSS 代码片段

本贴最后更新于 429 天前，其中的信息可能已经渤澥桑田

求一个类似下图样式的「引用」CSS 代码片段：

文字颜色：#4285F4；背景颜色：#DDE7F7。背景四个角有些小圆角，如下图。

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    24827 引用 • 102126 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9418 引用 • 42911 回帖 • 109 关注
北京 位置
100 悬赏
1 收藏
6 回帖
4
2
473 140 8 247 11 2 63

相关帖子

被采纳的回答
  • JeffreyChen • • 1 • 1 赞同
    付费者 支持者 捐赠者

    然后这个是加了一点左右边距，可能会好看一点：

    /* 引用文本样式 CSS片段 */
/* 动态锚文本 */
span[data-type="block-ref"][data-subtype="d"] {
  color: #4285F4; /* 字体颜色 */
  background-color: #DDE7F7; /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 0 3px; /* 左右边距 */
}
/* 静态锚文本 */
span[data-type="block-ref"][data-subtype="s"] {
  color: #4285F4;
  background-color: #DDE7F7;
  border-radius: 4px;
  padding: 0 3px;
}
​
6 回帖
求一个引用样式的 CSS 代码片段

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • JeffreyChen •
    付费者 支持者 捐赠者

    这个只对引用生效而不对超链接生效，试试？

    span[data-type="block-ref"][data-subtype="d"] {
  color: #4285F4;
  background-color: #DDE7F7;
  border-radius: 2px;
}
span[data-type="block-ref"][data-subtype="s"] {
  color: #4285F4;
  background-color: #DDE7F7;
  border-radius: 2px;
}
​
  • 其他回帖
  • sweesalt •
    订阅者 作者

    引用使用「加粗」，引用格式就消失了，能完善一下代码吗？我看 savor 主题是可以加粗的~

    1 回复
  • sweesalt •
    订阅者 作者

    谢谢

  • JeffreyChen •
    付费者 支持者 捐赠者

    OK 了，尽量整句一起加粗，如果只加粗其中的一部分的话就会是这样的效果，因为它会被自动分为多个引用：

    image.png

    /* 引用文本样式 CSS片段 */
span[data-type^="block-ref"] {
  color: #4285F4; /* 字体颜色 */
  background-color: #DDE7F7; /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 0 3px; /* 左右边距 */
}
​
    1 回复
    2 操作
    JeffreyChen 在 2024-01-27 18:46:47 更新了该回帖
    JeffreyChen 在 2024-01-27 18:44:21 更新了该回帖
  • 查看全部回帖
sweesalt
北京
回帖
270
 帖子
68
 积分
6610

近期热议

推荐标签 标签

  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    132 引用 • 1115 回帖 • 120 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 160 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 165 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 5 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Excel
    31 引用 • 28 回帖
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    171 引用 • 3842 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    22 引用 • 148 回帖 • 9 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 400 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 269 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 8 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 13 关注
  • Outlook
    1 引用 • 5 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 367 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 755 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    172 引用 • 516 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 2 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    167 引用 • 595 回帖 • 1 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注

最新标签