必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-06-26 17:42:09来源:IT技术作者:seo实验室小编阅读:67次「手机版」
 

text-decoration

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>

效果图:

相关阅读

Unity3D - 【Animator】骨骼动画的实现

利用Animator实现骨骼动画: 1> 确保人物能够正常移动、Camera能够正常跟随 2> 使用WSAD对人物不同运动状态进行切换与连接 3> Le

增量式 PID 算法的 STM32 实现

虽然PID不是什么牛逼的东西,但是真心希望以后刚刚接触这块的人能尽快进入状态。特地分享一些自己如何实现的过程。首先说说增量式P

4.利用逻辑门实现加法器和减法器

了解了门,我们就可以做一些实际应用了,计算机的主要目的是计算,而门可以用于计算,所以可以说计算机是由各种不同的门组成。接下来我们

Axure教程:实现进度条、进度环和滑动条的简单方法

HTML打字机和字体发光效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

分享到:

栏目导航

推荐阅读

热门阅读