css 文字下划线 text-decoration

背景:

在某些时候需要给文字添加特殊样式。使用 text-decoration: underline; 来为段落文字添加下划线。也有其它文本装饰样式,例如:

  • none:无装饰(去掉装饰)
  • overline:上划线
  • line-through:贯穿线(删除线)

效果展示:

 

样式代码:

cursor: pointer;
color: #2770d4;//一种蓝色
text-decoration: underline;

写到这儿就结束了,下面是扩展:

二、其它

可以使用 text-decoration 的细化属性来更详细地控制下划线的样式,比如颜色、样式和位置:

运行代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 详细控制下划线样式示例</title>
  <style>
    .custom-underline {
      text-decoration-line: underline;
      text-decoration-color: red; /* 设置下划线颜色 */
      text-decoration-style: dashed; /* 设置下划线样式 */
      text-underline-position: under; /* 设置下划线位置 */
    }
  </style>
</head>
<body>
  <p class="custom-underline">这是带有自定义下划线样式的文字。</p>
</body>
</html>

三、其它2

可以组合这些装饰效果,例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 组合文字装饰示例</title>
  <style>
    .multiple-decoration {
      text-decoration: underline overline;
    }
  </style>
</head>
<body>
  <p class="multiple-decoration">这是同时带有下划线和上划线的文字。</p>
</body>
</html>

 

 

 

相关推荐

  1. css实现文字下划线动效

    2024-06-17 16:02:01       41 阅读
  2. CSS -webkit-text-security

    2024-06-17 16:02:01       8 阅读
  3. csstext-shadow详解

    2024-06-17 16:02:01       18 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-17 16:02:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-17 16:02:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-17 16:02:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-17 16:02:01       20 阅读

热门阅读

  1. LeetCode 1731, 151, 148

    2024-06-17 16:02:01       7 阅读
  2. 软件回归测试:策略及案例分析

    2024-06-17 16:02:01       7 阅读
  3. 19.channel相关方法

    2024-06-17 16:02:01       7 阅读
  4. 考Oracle OCM 的作用

    2024-06-17 16:02:01       5 阅读
  5. 1节18650锂电池的容量是多大,电流,电压是多大

    2024-06-17 16:02:01       9 阅读
  6. oracle跨版本exdp 从高版本到低版本 从18c到10g

    2024-06-17 16:02:01       8 阅读
  7. 小抄 20240611

    2024-06-17 16:02:01       5 阅读
  8. web前端网页实例:深度剖析与实践指南

    2024-06-17 16:02:01       8 阅读
  9. 【学习Shell脚本编程】

    2024-06-17 16:02:01       7 阅读
  10. 使用PLM系统对电池企业有哪些好处

    2024-06-17 16:02:01       5 阅读
  11. PostgreSQL的系统视图pg_auth_members

    2024-06-17 16:02:01       8 阅读