同时实现几种不同的text-decoration效果

最新推荐文章于 2024-06-23 04:29:52 发布

雅痞子军

最新推荐文章于 2024-06-23 04:29:52 发布

阅读量1.1k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_1724201421/article/details/79846049

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS中的text-decoration 属性规定添加到文本的修饰。

我们知道CSS（Cascading Style Sheets层叠样式表）最要义就在于层叠性，而如果要同时实现几种不同的text-decoration效果，如果是以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>同时实现几种不同的text-decoration效果</title>
    <style>
        p{
            text-decoration:overline;
            text-decoration:line-through;
        }
    </style>
</head>
<body>
    <p>与恶龙缠斗过久，自身亦成为恶龙；凝视深渊过久，深渊回以凝视</p>
</body>
</html>

得到的效果图为：

可以看到第二条text-decoration规则层叠掉了第一条，并没有得到我们想要的效果。

那如何同时实现多种不同的text-decoration效果呢？其实只需要把它们声明在同一条规则里面就可以了，如下面代码同时实现了上划线和中划线的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>同时实现几种不同的text-decoration效果</title>
    <style>
        p{
            text-decoration:overline line-through;
        }
    </style>
</head>
<body>
    <p>与恶龙缠斗过久，自身亦成为恶龙；凝视深渊过久，深渊回以凝视</p>
</body>
</html>

效果图：

同时实现上划线、中划线和下划线：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>同时实现几种不同的text-decoration效果</title>
    <style>
        p{
            text-decoration:overline line-through underline;
        }
    </style>
</head>
<body>
    <p>与恶龙缠斗过久，自身亦成为恶龙；凝视深渊过久，深渊回以凝视</p>
</body>
</html>

效果图：

雅痞子军

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
同时实现几种不同的text-decoration效果

CSS中的text-decoration 属性规定添加到文本的修饰。我们知道CSS（Cascading Style Sheets层叠样式表）最要义就在于层叠性，而如果要同时实现几种不同的text-decoration效果，如果是以下代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="U...
复制链接

扫一扫

专栏目录