如何用CSS改变上划线、下划线以及删除线的颜色呢？

顺晟科技

2022-09-13 14:24:32

487

何用CSS改变上划线、下划线以及删除线的颜色呢？这个问题我想困扰大家一定是很久了。没错，它也对我造成的很大的困扰，当我想用CSS去将文字改为蓝色，删除线改成红色，或者下划线改成yellow时，可是，总是无法实现，当然，你们可能会想，对于下划线，我们可以改变边框颜色的形式来取代上、下划线的效果。虽然这可能为我们解决一时的问题，可是，这终究不是***的办法。
用边框实现上、下划线颜色的代码：

Code:

<style type="text/css">
<!--
.page_number {
color: royalblue;
border: solid 1px #f00;
border-left: none;
border-right: none;
}
--></style>

可是对于删除线，我们就没有办法了。
不过，也有的人会说，我先将要修改的文字对对的全局进行设置，并设为红色，同时，再局部将文字用<span>设为蓝色。这样也是一个很不错的方法啊。
用全局色来实现上、下划线及删除线的颜色效果，再用局部色来实现文字颜色效果。
Code:

<html>

<head>
<style type="text/css">
.line {
    color: red;
    text-decoration: line-through;
}
.text
{
    color: blue;
}
</style>
</head>

<body>

<div class="line">
    <span class="text">but this <b>span</b> has it set to line-through.</span> 

</body>

</html>
效果如下：

不过，问题总是有解决的时候，自从W3C发布CSS3.0的相关属性以来，这个问题好像已经解决了，而为何始没能出现在人们的视野之中的原因是，当今的大部分浏览器无法支持CSS3.0仍停留在以前的CSS2.0，我想这对于我们这些设计爱好者来说，是一件多么让人感伤的事，辛苦的做好代码，可以别人却因为浏览器的原因而无法看到我们的设计成果，世界上最大的痛苦莫过如此吧。
现在我就来简单的说说那几个CSS属性吧。
text-line-through的属性设置：
text-line-through-color：设置删除线的颜色。text-line-through-mode ：设置删除线的显示模式。
text-through-style：设置删除线的线型。text-overline 的属性设置：
text-overline-colo:text-overline-mode:
text-overline-style:
text-underline 的属性设置：
text-underline-color:
text-underline-mode:text-underline-style: 反正现在都还不支持，就先写上来吧，对于它的用法，以后再讲吧，如果你感兴趣的话，可以用一个好一点的浏览器测试一下下。呵呵！

http://hi.baidu.com/zgalong/blog/item/d19779667b54a322ab184cd7.html

上一篇：网页设计入门--如何使用css设置字下一篇：css 01-CSS属性：字体属性和

网站建设

Css

如何用CSS改变上划线、下划线以及删除线的颜色呢？