css如何添加删除线?

2024-01-17 11:25 小编
   首先我们了解csstext-decoration属性,下面就简单介绍一下:
    text-decoration属性规定添加到文本的修饰。
    说明:
    这个属性允许对文本设置某种效果,如加删除线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持blink。
    那么如何使用csstext-decoration属性添加文本文字的删除线效果,下面我们通过简单的代码示例,为大家详细解说关于css删除线的实现方法!
    <!DOCTYPEhtml>
    <html>
    <head>
    <metacharset="UTF-8">
    <title>css添加文本文字的删除线</title>
    <style>
    p{
    text-decoration:line-through;
    }
    </style>
    </head>
    <body>
    <p>这里有一条删除线</p>
    </body>
    </html>
    效果图:
    1.jpg
    说明:
    line-through属性值:定义穿过文本下的一条线。
    通过例子可以看出,通过设置text-decoration:line-through;为<p>标签里的文本文字添加了删除线,方法简单、方便。且可以通过css设置简单修饰删除线样式,比如:颜色,例:
    <!DOCTYPEhtml>
    <html>
    <head>
    <metacharset="UTF-8">
    <title>css添加文本文字的删除线</title>
    <style>
    p{
    text-decoration:line-through;
    color:red;
    }
    span{
    color:black;
    }
    </style>
    </head>
    <body>
    <p><span>这里有一条删除线</span></p>
    </body>
    </html>


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码