CSS text-decoration 属性 | CSS 文本格式 | CSS教程

返回到:CSS 文本格式 | CSS教程

属性定义及使用说明

text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等。

text-decoration 属性是以下三种属性的简写:

  • text-decoration-line【几乎所有的主流浏览器都不支持 text-decoration-line 属性,这里就不介绍了】
  • text-decoration-color【几乎所有的主流浏览器都不支持 text-decoration-line 属性,这里就不介绍了】
  • text-decoration-style

语法

/*关键值*/
text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

/*全局值*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
默认值:none
继承:no
版本:CSS1
JavaScript 语法:object.style.textDecoration=”overline”

属性值

描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性谷歌IE火狐苹果opera
text-decoration1.03.01.01.03.5

实例

设置h1,h2,h3和h4元素文本装饰:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程(web176.com)</title> 
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>

</html>

再来个实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程(web176.com)</title> 
<style>
h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

</style>
</head>

<body>
<h1 class="under">下划线</h1>
<p class="line">删除线</p>
<p class="blink">闪烁效果,但浏览器不会显示</p>
<h1 class="over">下划线</h1>
<p>这是一个 <a class="none" href="#">链接</a>,默认情况下链接是有下划线的,这边我们移除它。</p>
<p class="underover">上划线与下划线</p>

</body>

</html>

如何实现虚线与波浪线:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程(web176.com)</title>  
<style>
h1 {
  text-decoration: underline overline dotted red;
}

h2 {
  text-decoration: underline overline wavy blue;
}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

<p><strong>注意:</strong>在  Edge/Internet 浏览器中没有效果。</p>

</body>

</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/cssprop/5725.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年4月21日 下午5:31
下一篇 2022年4月21日 下午5:43

相关推荐

发表回复

登录后才能评论