你不知道的下划线属性-text-decoration

article/2025/7/13 6:49:52

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

原文链接 ==>http://sylblog.xin/archives/20

前言


上一篇文章我们介绍了这张图,还是这张图,引出本文本文想要介绍的内容,下划线,上划线,删除线。

第一眼看过去,我们看到的是啥?没错,是文字

text-decoration

定义

text-decoration 是用来设定文本的下划线,上划线,删除线

以下三种属性的简写:

text-decoration-line

text-decoration-color

text-decoration-style

text-decoration-line

属性值

none:不画线,并删除任何现有的装饰。

underline: 在文本的基线上画一条 1px 的线。

line-through: 在文本的“中间”点画一条 1px 的线。

overline:在文本的“顶部”上方绘制一条 1px 的线。

inherit: 继承父元素。

blink : 已被弃用,并且不能在任何当前浏览器中使用。当它工作时,它通过在 0% 和 100% 不透明度之间快速切换使文本看起来“闪烁”。

underline ,line-through ,overline 这三个属性可以随意组合

不同的浏览器,效果可能不一样

这一张是chrome浏览器的

这一张是opera浏览器的,对于y这种会超出基线的字符,效果跟chrome是不一致的,备注::我的opera版本很老,是45的,

这里附上下载获取各个版本opera的链接

text-decoration-color

设置线的颜色,当然前提是要设定线。

text-decoration-style

设置线的样式

属性值

solid: 默认。单实线。

double: 一对实线。

dotted: 点虚线。

dashed:虚线。

wavy: 波浪线。

text-underline-offset

设置下划线偏移位置。

auto

默认值。

<length>

长度值。

<percent>

百分比值。百分比是相对于1em大小计算的。因此,text-underline-offset:100%等同于text-underline-offset:1em。

text-underline-offset:10px

text-decoration-skip

先上兼容性

这个属性基本就没啥主流浏览器兼容的,所以要慎用!!!

属性值

objects: 默认。会跳过内联元素

这个属性在opera45进行测试的时候是可以被识别,但是被没有出现想要的效果(can iuse 给的结论有点问题!)。
只能简单说一下了。

 text-decoration-line: underline;text-decoration-skip: objects;<p>yyy<span>123</span>-text-decoration-skip: objects;<p>

对于上面的代码,在123 下面是没有线的

none: 下划线穿过所有。

下过大概就是下面这样

spaces: 跳过空格、单词分隔符和任何用letter-spacing或设置的空格word-spacing。

在opera45中无法被识别,
效果大概就是这样:

ink: 跳过超出基线的字符。

因为在chrome浏览器中,会自动跳过超过极限的字符(上面介绍过),所以我们换成了opera45,查看效果。

  text-decoration-line: underline;text-decoration-skip: ink

edges

文本修饰的开始与结束会比原有的装饰范围向内收缩(例如半个线宽)。这样,相邻的元素的下划线就可以分开。(这对于中文很重要,因为在中文中,下划线也是一种形式的标点符号。)
An example of “text-decoration-skip: edges;”.

box-decoration

文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰;修饰的盒不会渲染本身的盒修饰。

text-decoration-skip-ink

属性值

auto 跟text-decoration-skip:ink表现一致。

none;

text-decoration-thickness

用来设置上划线,下划线,删除线的粗细。

兼容性

属性值

auto:

(默认)允许浏览器为文本装饰线指定适当的粗细。

from-font:

如果第一个可用字体具有指定粗细,则使用。

<length>:

带有单位的有效长度,例如10px;

text-decoration-thickness: 10px;

percentage:

将文本装饰线的粗细指定为元素字体中 1em 的百分比。

    font-size: 50px;text-decoration-thickness: 20%;

initial:

属性的默认设置为 auto。

inherit:

继承父元素

unset:

取消设置粗细


http://chatgpt.dhexx.cn/article/2c3iFy7n.shtml

相关文章

html中加长下滑线,css怎么设置下划线的长度?

层叠样式表(英文全称&#xff1a;Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 自定义下划线。使用:after&#xff0c;首先添加一个空的内容&#xff0c;为了让它排列到标题的下面&#…

七彩视界开源全解公益版,全新后台非常漂亮,全网首发!

苍穹影视V20七彩视界开源全解公益版&#xff0c;全新后台非常漂亮&#xff0c;全网首发&#xff01; 苍穹影视V20七彩视界开源全解公益版&#xff0c;全新后台非常漂亮内有安装教程 下载地址&#xff1a;https://www.lanzoux.com/iiENsex40lc 注苍穹网络

新版七彩苹果ios推荐影片播放变返回按钮解决

收到用户反映&#xff0c;新版七彩苹果ios首页底部的推荐影片播放变成返回按钮问题 解决方法如下&#xff1a;打开前端文件搜索并进入路径 /html/video/play_UIBPlayer_recommend_for_ios_main 打开文件找到第437行 437行最前边打上单行注释// 即可解决问题 本文转载&…

七彩影视四个步骤去除CMS教程

网传七彩源码原生播放器苹果端cms有问题&#xff0c;有能力自己修复&#xff0c;没能力请删除cms 下面由浪杉博客提供教程&#xff0c;将框选代码直接删除&#xff0c;数字往上推即可&#xff01; 文件分别是 /index.html ./script/vedio_controller.js 本文转载&#xff0c…

新版七彩影视修复二级返佣修改重置问题

近期收到反馈新七彩影视多端版二级返佣修改不了&#xff0c;无论怎么修复都是重置20%比例 现在浪杉博客这边教大家如何修改&#xff1a; 首先找到路径&#xff1a; /application/index/controller/Index.php 打开文件后搜索 agent_rebate_c 搜索到后会自动跳转位置&#xff…

黄河千年清一回与人类健康

黄河千年清一回奏响一曲曲让人类走进幸福新时代的壮丽凯歌。疫情之后的首届全世界健康产业发展大会 5 月28 日上午 9 时在中国首都北京召开 The Yellow River has played a magnificent song of triumph in the millennium, ushering humanity into a new era of happiness. T…

广东金龄会垮省文旅游——走进七彩云南昆明融创

&#xff08;本栏目记者实况报道&#xff09;近日由广东省健康金龄公益演艺委员会联合昆明融创文旅城&#xff0c;共同组织的两省中老年文艺交流活动&#xff0c;在昆明融创正式拉开序幕&#xff0c;此次活动旨在响应国家新型养老爱老服务体系&#xff0c;将文旅与演艺结合&…

Android 程序员不得不收藏的个人博客(持续更新...)

微信不支持外链&#xff0c;请点击原文查看文中链接。 本文已收录我的 Github &#xff0c;持续更新中 &#xff0c;欢迎点赞 &#xff01; 每周打开一次收藏夹里的个人博客&#xff0c;已经成为了我的人生一大乐趣。 相比各大博客平台&#xff0c;我一直更加偏爱个人博客。在每…

小米Civi 1S 定价2299元起,主打美颜,让你上镜自由

4月21日&#xff0c;小米正式发布小米Civi 1S和小米智能家庭屏10两款重磅新品。 小米Civi 1S是专为年轻人打造的潮流手机&#xff0c;带来外观、美拍和流畅三大升级。外观加入行业稀缺的奇迹阳光&#xff08;白色&#xff09;配色&#xff0c;阳光下能够呈现绚丽的七彩效果。 …

为何恒星/太阳(辐射)可以被视为黑体(辐射)?

文章目录 1. 黑体与黑体辐射的概念1.1 黑体1.2 黑体的实现1.3 黑体辐射1.4 黑体辐射概念的应用1.5 黑体辐射相关历史 2. 恒星&#xff08;太阳&#xff09;内部的情况2.1 太阳内部情况2.2 太阳辐射光谱2.3 高分辨率太阳光谱 3. 关于恒星&#xff08;辐射&#xff09;是否可以被…

七彩影视双端新版本源码

简介&#xff1a; 七彩双端新版本源码 支持PCWAPAPP三端 对接苹果CMS后台 网盘下载地址&#xff1a; http://kekewl.org/eas65KcT9de0 图片&#xff1a;

苍穹影视V20七彩视界免sq源码 kyuan源码

介绍&#xff1a; 1.修改后台数据库文件application/database.php 2.导入数据库&#xff0c;PHP安装扩展&#xff1a;rides/sg113.前端修改config.xml中相关信息 3. 注册apicloud,使用小乌龟上传前端文件&#xff0c;添加所有模块&#xff0c;完成前端安装 4. 后台账号admin密…

苍穹影视V20七彩视界免授权开源源码

介绍&#xff1a; 1.修改后台数据库文件application/database.php 2.导入数据库&#xff0c;PHP安装扩展&#xff1a;rides/sg11 3.前端修改config.xml中相关信息 3. 注册apicloud,使用小乌龟上传前端文件&#xff0c;添加所有模块&#xff0c;完成前端安装 4. 后台账号admin密…

新版七彩视界影视双端百果深海蓝UI前端主题

新版七彩影视双端源码百果深海蓝UI前端主题 1.修复后端报错泄露数据库信息。 2.修复对接苹果cms对接安全接口。 3.修复前端官解换线卡顿或延迟重音问题。 4.修复切换线路延迟卡死不能返回问题&#xff0c;秒切线路更加流畅。 5.修复芒果换集无法识别线路跳转通用线路问题。 6.修…

java实现手机短信验证全过程

点个赞&#xff0c;看一看&#xff0c;好习惯&#xff01;本文 GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录&#xff0c;这是我花了 3 个月总结的一线大厂 Java 面试总结&#xff0c;本人已拿大厂 offer。 另外&#xff0c;原创文章首发在我的个人博客&#x…

安卓手机短信

前提--权限&#xff1a; [java] view plain copy <uses-permission android:name"android.permission.RECEIVE_SMS" > </uses-permission> <uses-permission android:name"android.permission.READ_SMS" > </uses-permission&…

想为自己的网站添加短信验证怎么弄_捷径教程讲解一云手机短信验证码接受平台的聚合...

除了最初发表的以"熔岩音乐"和"流利阅读"为范本&#xff0c;以及初学者入门点这里&#xff0c;内容太过于巨细靡遗&#xff0c;主要是为了给入门朋友详解相关的基本流程&#xff0c;但之后所有文章唯有对于实例的重点讲解&#xff0c;主要在于培养大家对于…

短信SMS的接收

近日&#xff0c;看了《第一行代码》有关短信接收的内容&#xff0c;就总结了一下。 1.手机接收到一条短信时&#xff0c;系统会发出一条android.provider.Telephy.SMS_RECEIVER的广播&#xff0c;这条广播带有短信的所有数据 2.首先定义xml文件 <LinearLayout android:layo…

阿里云——Java实现手机短信验证码功能

目录 如何实现短信验证码功能1.准备工作1.1 注册 阿里云 账号&#xff0c;并完成实名认证。找到短信服务功能。1.2 开通短信服务1.3 签名与模板1.4 获取AccessKey1.5 打开短信控制台&#xff0c;通过API测试功能 2.Java SDK 示例2.1 添加maven依赖2.2 阿里云官方配置 如何实现短…

Android短信Mms接受流程

本文主要介绍Android如何接收短信&#xff0c;流程分为两个部分&#xff0c;Framework层和App层。 Framework层&#xff1a; 短信的接收&#xff0c;Framework部分处理的顺序是RIL->SMSDispatcher->GsmSMSDispatcher/CdmaSMSDispatcher->SMSDispatcher。 当短信到Fram…