Home > Web Front-end > Front-end Q&A > How to use css text-decoration-style attribute

How to use css text-decoration-style attribute

藏色散人
Release: 2019-05-30 09:52:03
Original
4058 people have browsed it

css The text-decoration-style attribute is used to specify how lines are displayed. Its syntax is text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit.

How to use css text-decoration-style attribute

#How to use the css text-decoration-style attribute?

Definition and Usage

The text-decoration-style property specifies how lines are displayed.

Default: solid

Inherited: No

Animatable: No.

Version: CSS3

JavaScript Syntax:

object.style.textDecorationStyle="wavy"
Copy after login

CSS Syntax

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
Copy after login

Properties Value

● solid Default value. The line will appear as a single line.

● double lines will be displayed as double lines.

● dotted lines will be displayed as dotted lines.

● dashed lines will appear as dotted lines.

● wavy lines will be displayed as wavy lines.

● initial sets this property to its default value.

● inherit Inherit this attribute from the parent element.

Example

Display a wavy line below the paragraph:

<!DOCTYPE html>
<html>
<head>
<style>
p
{
text-decoration: underline; 
text-decoration-style: wavy; 
-moz-text-decoration-style: wavy; /* 针对 Firefox 的代码 */
}
</style>
</head>
<body>
<p>
本实例中的段落文本下方会显示一条波浪线。</p>
<p><b>注意:</b>只有 Chrome 支持 text-decoration-style 属性。</p>
<p><b>注意:</b>Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-style 属性。</p>
</body>
</html>
Copy after login

Effect output:

How to use css text-decoration-style attribute

##Browser support: Almost all major browsers do not support the text-decoration-style attribute. Firefox supports an alternative property, the -moz-text-decoration-style property.

The above is the detailed content of How to use css text-decoration-style attribute. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template