CSS text-decoration-style设置文本修饰线条的样式属性笔记

原创 国哥笔记  2018-09-25 20:05  阅读 1,127 views 次

text-decoration-style属性定义及用法

css中,text-decoration-style属性是用来设置文本下滑线条的样式,通过该属性可以将文本的下滑线条设置为单线(solid)、双线(double)、点状线(dotted)等样式;但该属性目前大部分浏览器不支持,Firefox 浏览器支持另一个可替代text-decoration-style属性的属性,即在text-decoration-style属性前加-moz-标记,即-moz-text-decoration-style。

text-decoration-style属性语法格式

css语法:text-decoration-style: solid \ double \ dotted \ dashed \ wavy \ initial \ inherit;

JavaScript 语法: object.style.textDecorationStyle="solid \ double \ dotted \ dashed \ wavy \ initial \ inherit;"

text-decoration-style属性值说明

  • solid :定义线条为单条直线(默认)。
  • double:定义线条为双线。
  • dotted:定义线条为点状线。
  • dashed:定义线条为虚线。
  • wavy:定义线条为波浪线。
  • initial:定义该属性为它的默认值。
  • inherit:从父元素继承该属性的属性值。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS text-decoration-style设置文本修饰线条的样式属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px ;}
#a{text-decoration: underline; /*定义文本下显示线条*/
text-decoration-style:double;/*目前大部分浏览器还不支持该属性*/
-moz-text-decoration-style:double; /*Firefox浏览器支持该属性*/}
#b{text-decoration: underline;text-decoration-style:dotted;-moz-text-decoration-style:dotted;}
#c{text-decoration: underline;text-decoration-style:dashed;-moz-text-decoration-style:dashed;}
#d{text-decoration: underline;text-decoration-style:wavy;-moz-text-decoration-style:wavy;}
</style>
</head>
<body>
<div id = "a">double属性值将显示为双线</div>
<div id = "b">dotted属性值将显示为点状线</div>
<div id = "c">dashed属性值将显示为虚线</div>
<div id = "d">wavy属性值将显示为波浪线</div>
</body>
</html>

运行结果: CSS text-decoration-style设置文本修饰线条的样式属性笔记

说明

text-decoration-style属性只定义线条的显示样式,并不定义文本修饰的线条,如果不定义线条,text-decoration-style属性将不起作用。所以要用text-decoration-style属性定义线条显示样式,就必须得定义线条,即text-decoration属性可以用来定义修饰文本的线条。

有关text-decoration属性的用法见:CSS text-decoration属性笔记

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-text-decoration-style.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情