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>
效果图: