Jquery中文網 www.4271936.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 CSS更好利用text-decoration屬性顯示文字特效

CSS更好利用text-decoration屬性顯示文字特效

發布時間:2020-05-08   編輯:www.4271936.live
jquery中文網為您提供CSS更好利用text-decoration屬性顯示文字特效等資源,歡迎您收藏本站,我們將為您提供最新的CSS更好利用text-decoration屬性顯示文字特效資源
本文我們來講講利用css的text-decoration屬性為文本文字做一些比較不錯的樣式特效,雖然這些特效不是很炫,不過應用得當,還是很不錯的。

text-decoration屬性可以做很多事情,我們來學習這個屬性實現更多細致的樣式。

文字可以有更多裝飾

例如:

a {
  text-decoration: underline overline;
}

text-decoration

可以看到在Almanac 中text-decoration修飾的內容,更具體點,它給子屬性text-decoration-line添加多個屬性值。


改變裝飾的顏色

下劃線的顏色默認為文本設置color的屬性值,但你可以改變:

a {
  text-decoration-color: #f06d06;
}

text-decoration

觀察在Almanac中 text-decoration-color修飾的內容。

注意在Gecko里下劃線是呈現在字體的下面,然而在WebKit/Blink里下劃線呈現在字體的上面:

text-decoration

如今處理彩色下劃線普遍使用border來代替text-decoration。邊框可以比text-decoration更好的獨立控制下劃線的顏色,寬度以及位置。

但有一些事情border是做不了的,就像......


改變裝飾的樣式

border無法實現下面的樣式!

a {
  text-decoration-style: wavy;
}

text-decoration

觀察Almanac 中text-decoration-style修飾的內容。


它會變得更好

現如今已經有很多方法可以更好的實現帶下劃線的文本。例如,使用skip可以更好的增強閱讀性,就像下面一樣:

text-decoration

上面例子是用 text-decoration-skip實現的,可是并不是所有瀏覽器都支持。同時,使用較寬松的下劃線以及減少contrast-y的值可能會更好,這里使用了rgba():

text-decoration

隱藏下劃線只是它的(text-decoration)的一個功能,此外,你也可以用skip修飾一些行內元素,空格,甚至控制edges。

需要注意的是Safari/iOS瀏覽器似乎會使用默認的skip值。

text-decoration

匯總

html

<div class="style">    line:    <button>underline</button>    <button>line-through</button>    <button>overline</button>  </div>  <div class="color">    color:    <button>black</button>    <button>red</button>    <button>gray</button>  </div>  <div class="skip">    skip:    <button>objects</button>    <button>spaces</button>    <button>ink</button>    <button>edges</button>    <button>box-decoration</button>    <button>trailing-spaces</button>  </div>  <p class="solid">text-decoration-style: solid;</p>  <p class="double">text-decoration-style: double;</p>  <p class="dotted">text-decoration-style: dotted;</p>  <p class="dashed">text-decoration-style: dashed;</p>  <p class="wavy">text-decoration-style: wavy;</p>


CSS

.solid {     text-decoration-style: solid;   }  .double {     text-decoration-style: double;  }  .dotted {     text-decoration-style: dotted;   }  .dashed {     text-decoration-style: dashed;   }  .wavy {     text-decoration-style: wavy;   }  /* styling for Pen, unrelated to text-decoration-style */  body {     font-family: sans-serif;  }  p {    text-decoration: underline;    font-size: 2em;  }  div {    line-height: 1.5;  }  JS  $(".style button").on("click", function() {    $("p").css("text-decoration-line", $(this).text());  });  $(".color button").on("click", function() {    $("p").css("text-decoration-color", $(this).text());  });  $(".skip button").on("click", function() {    $("p").css("text-decoration-skip", $(this).text());  });





text-decoration屬性變成了屬性簡寫

跟著最新的CSS規范,text-decoration現在的寫法是這樣的:

a {
  text-decoration: overline aqua wavy;
}

text-decoration屬性現在需要用三種屬性值來表示了:text-decoration-line, text-decoration-color, and text-decoration-style.

但不幸的是,目前只有火狐瀏覽器實現了對這些新屬性的支持。

你可以用火狐瀏覽器試一試下面的演示:
HTML代碼

<a href="#" id="a">IT'S LIKE WATER, PEOPLE

(You should see a wavy line on top. Currently works only in Firefox)

CSS代碼


body {
  padding: 30px;
  text-align: center;
  font-family: Arial, sans-serif;
}

a, a:visited {
  color: blue;
  background: aqua;
  -moz-text-decoration-color: aqua;
  -moz-text-decoration-line: overline;
  -moz-text-decoration-style: wavy;
  text-decoration-color: aqua;
  text-decoration-line: overline;
  text-decoration-style: wavy;
}

演示

aaa.jpg
在這演示中,我們沒有使用簡寫形式,而是分開描述每個屬性。這是可以更好的保證瀏覽器的向后兼容,使那些目前不支持這種寫法的瀏覽器也不受影響。

您可能感興趣的文章:
JQuery結合CSS操作打印樣式的方法
十個迅速提升JQuery性能讓你的JQuery跑得更快
jquery 圖片輪換效果
純CSS打造的導航菜單(附jquery版)
jQuery不間斷滾動效果(模擬百度新聞支持文字/圖片/垂直滾動)
jQuery 入門級學習筆記及源碼
jQuery創建自己的插件(自定義插件)的方法
jQuery DOM操作小結與實例
jQuery animate效果演示
基于jquery的自定義鼠標提示效果 jquery.toolTip

[關閉]
微信下载APP完成任务如何赚钱 信弘配资 股市上证指数 山西体彩11选5直选遗漏 pk10破解器 手机版 天津十一选五开奖号一定牛 安徽体彩11选五奖金多少 科顺股份股票 宁夏11选5任三最大遗漏多少期 山东11选5前3组遗漏 广西股票融资