如何用CSS改變上劃線、底線以及刪除線的顏色呢?

來源:互聯網
上載者:User
何用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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.