你不知道的下划线属性-text-decoration
大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信: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:
取消设置粗细
你不知道的下划线属性-text-decoration的更多相关文章
- mybatis无法给带有下划线属性赋值问题
https://blog.csdn.net/qq_33768099/article/details/69569561
- Android TextView 添加下划线的几种方式
总结起来大概有5种做法: 1. 将要处理的文字写到一个资源文件,如string.xml(使用html用法格式化) 2. 当文字中出现URL.E-mail.电话号码等的时候,可以将TextView ...
- iOS 给UILabel文字加下划线
摘自:http://blog.sina.com.cn/s/blog_6cd380c10101b6hn.html //带下划线的“注” NSMutableAttributedString可变的属性字符串 ...
- UILabletext去掉乱码 控制颜色 行高 自定义大小 。显示不同的字体颜色、字体大小、行间距、首行缩进、下划线等属性(NSMutableAttributedString)
text去掉乱码 设置不同颜色 行高 自定义大小 #import <Foundation/Foundation.h> @interface TextsForRow : NSObject @ ...
- springmvc配置MappingJackson2HttpMessageConverter实现属性驼峰和下划线的转换
需求 php调用java接口时,因为php那边的属性都是下划线风格,java这边的属性都是驼峰的风格.配置springmvc的json转换,在requestBody的时候(调用对象的set 方法)将j ...
- “layout_”下划线开头的属性
观看幕课网的视频的收获 “layout_”下划线开头的属性都是交给父容器去处理的属性,如: android:layout_width="match_parent" android: ...
- 转:【iOS开发每日小笔记(十一)】iOS8更新留下的“坑” NSAttributedString设置下划线 NSUnderlineStyleAttributeName 属性必须为NSNumber
http://www.bubuko.com/infodetail-382485.html 标签:des class style 代码 html 使用 问题 文件 数据 ...
- python中有两个下划线__的是内置方法,一个下划线_或者没有下划线的可能是属性,也可能是方法,也可能是类名
python中有两个下划线__的是内置方法,一个下划线_或者没有下划线的可能是属性,也可能是方法,也可能是类名,如果在类中定义的就是类的私有成员. >>> dir(__builtin ...
- jackson 常用注解,比如忽略某些属性,驼峰和下划线互转
一般情况下使用JSON只使用了java对象与字符串的转换,但是,开发APP时候,我们经常使用实体类来做转换:这样,就需要用到注解: Jackson默认是针对get方法来生成JSON字符串的,可以使用注 ...
随机推荐
- 分治FFT/NTT
粘板子: #include<cstdio> #include<cstring> #include<algorithm> using namespace std; t ...
- Water 2.5.6 发布,一站式服务治理平台
Water(水孕育万物...) Water 为项目开发.服务治理,提供一站式解决方案(可以理解为微服务架构支持套件).基于 Solon 框架开发,并支持完整的 Solon Cloud 规范:已在生产环 ...
- Redis集群节点扩容及其 Redis 哈希槽
Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value 时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求 ...
- 如何规划一台 Linux 主机,步骤是怎样?
1.确定机器是做什么用的,比如是做 WEB .DB.还是游戏服务器.不同的用途,机器的配置会有所不同. 2.确定好之后,就要定系统需要怎么安装,默认安装哪些系统.分区怎么做. 3.需要优化 ...
- 为什么要配置JDK环境变量?
1. PATH环境变量.作用是指定命令搜索路径,在shell下面执行命令时,它会到PATH变量所指定的路径中查找看是否能找到相应的命令程序.我们需要把 jdk安装目录下的bin目录增加到现有的PATH ...
- java-字节流-字符流
I/O叙述 FileOutputStream类字节输出流的介绍: 写入数据的原理 java程序-->JVM(java虚拟机)--->OS(操作系统)---->OS调用写数据的方法-- ...
- 学习GlusterFS(七)
初始环境: 系统环境:centos73.10.0-514.26.2.el7.x86_64 机器数量:两台 硬盘:至少两块,一块为系统盘,另一块留作他用 命名规则:node1 node2 IP规划:19 ...
- elasticsearch 5.6.7在线安装ik分词,亲测有效
官网的在线安装命令 ./bin/elasticsearch-plugin install https://github.com/medcl/elasticsearch-analysis-ik/rele ...
- Python中module文件夹里__init__.py的功能
怎么引用模块 环境:win7 + python3.5.2文档结构: -project -data -src -filterCorpus.py -translateMonolingual.py 问题 ...
- Python模块导入方式
import导入方式 from...import导入方式 from...import... 导入模块相当于在此文件中写了所导入函数名(对比c/c++中的.h文件来理解),所以在之后使用导入的函数直接 ...