text-decoration的使用

最新推荐文章于 2023-08-14 22:30:51 发布

weixin_30877755

最新推荐文章于 2023-08-14 22:30:51 发布

阅读量236

点赞数

CC 4.0 BY-SA版权

文章标签：开发工具 javascript ViewUI

原文链接：http://www.cnblogs.com/Sara-shi/p/5287332.html

本文详细介绍了 CSS 中 text-decoration 属性的使用方法及其各个值的效果展示，包括下划线、上划线、删除线和文字闪烁等效果，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../css/html5.css">
<script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
<title>text-decoration的使用</title>
<style>
p{padding-left: 10px}
p.underline{ text-decoration:underline;} /*下划线*/
        p.overline{ text-decoration:overline;} /*顶划线*/
        p.line-through{ text-decoration:line-through;} /*删除线*/
        p.blink{ text-decoration:blink} /*文字闪烁，只有低版本的firefox支持，高版本的通过js实现*/
        p.none{ text-decoration:none} /*不给文字设置任何效果，默认值*/

        label{
padding-left: 20px;
        }

article{
margin: 20px;
        }
article h3{
margin: 0;
        }
nav{
padding-top:50px;
        }
</style>

</head>
<body>
<header><h1>text-decoration的使用</h1></header>
<div id="container">
<nav>
<article>
<header><h3>上划线</h3></header>
<p class="overline">上划线文字 </p>
</article>
<article>
<header><h3>下划线</h3></header>
<p class="underline">下划线文字</p>
</article>
</nav>
<section>
<article  style="transform: rotate(0deg)">
<header><h3 style="color:#fff">text-decoration属性说明</h3></header>
<p>                text-decoration属性：允许对文本设置某种效果，对应值有：                <br>                <label>none-默认，没有任何效果；</label>                <br>                <label>underline：下划线；</label>                <br>                <label>overline：上划线；</label>                <br>                <label>line-through：删除线；</label>                <br>                <label>blink：文字闪烁。</label>                </p>            </article>            <article style="transform: rotate(0deg)">                <header><h3 style="color:#fff;">不设置效果</h3></header>                <p class="none">不设置效果</p>                <p>正常文字对比</p>            </article>        </section>        <nav>            <article style="transform:rotate(10deg)">                <header><h3>删除线</h3></header>                <p class="line-through">删除线文字、删除线文字</p>            </article>            <article style="transform:rotate(10deg)">                <header><h3>文字闪烁</h3></header>                <p class="blink">文字闪烁</p>            </article>        </nav>        <footer><h2></h2></footer>    </div></body><script type="text/javascript">    //通过js实现文字闪烁效果    setInterval('BlinkObj()',500);    function BlinkObj(){        var obj = $(".blink").css("visibility");        if(obj == "hidden")            $(".blink").css("visibility","visible");        else            $(".blink").css("visibility","hidden");    }</script></html>