學習要點: 1.文本陰影 2.文本裁剪 3.文本描邊 4.文本填充 主講教師:李炎恢 本章主要探討 HTML5 中 CSS3 中文本效果,其中也包含一些之前講過的 CSS3 文本屬性。 一.文本陰影 CSS3 提供了 text-shadow 文本陰影效果,這個屬性在之前講過,只是沒有涉及瀏覽器支持情 ...
學習要點:
1.文本陰影
2.文本裁剪
3.文本描邊
4.文本填充
主講教師:李炎恢
本章主要探討 HTML5 中 CSS3 中文本效果,其中也包含一些之前講過的 CSS3 文本屬性。
一.文本陰影
CSS3 提供了 text-shadow 文本陰影效果,這個屬性在之前講過,只是沒有涉及瀏覽器支持情況。
text-shadow
|
Opera |
Firefox |
Chrome |
IE |
Safari |
9.5+ |
3.5+ |
4+ |
10+ |
3.1+ |
這裡有幾個註意點:1.text-shadow 在 CSS2 的時候出現過,但各大瀏覽器礙於消耗大量的資源,遲遲未支持,然後在 CSS2.1 中剔除了。現在,CSS3 已經全面支持了;2.最低支持版本上,不同手冊和教材上都不太同,但版本年代久遠,無傷大雅。最準確的可以查詢這個網站:http://caniuse.com。最需要註意的只有 IE10 才支持,IE9 不支持的;3.目前的瀏覽器不需要給這個屬性加上任何首碼,具體查詢首碼版本可以訪問剛纔提供的地址。
//正值陰影
text-shadow: 1px 1px 1px red;
//負值陰影
text-shadow: -1px -1px 1px red;
//多重陰影疊加
text-shadow:0px 0px 0 rgb(188,178,188),
1px 0px 0 rgb(173,163,173),
2px 0px 0 rgb(157,147,157),
3px 0px 0 rgb(142,132,142),
4px 0px 0 rgb(126,116,126),
5px 0px 0 rgb(111,101,111),
6px 0px 0 rgb(95,85,95),
7px 0px 0 rgb(79,69,79),
8px 0px 7px rgba(0,0,0,0.35),
8px 0px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
二.文本裁剪
CSS3 提供了 text-overflow 屬性來控制文本的溢出部分,它的作用是對溢出的部分裁剪掉,然後判定是否添加省略號。首先我們先看下樣式表的屬性,如下:
屬性值 |
說明 |
clip |
預設值,裁剪文本時不添加“...”省略號 |
ellipsis |
裁剪文本時添加“...”省略號 |
//必須不換號和使用 overflow 控制溢出
p { width: 160px; white-space: nowrap; background: silver; /*text-overflow: clip;*/ text-overflow: ellipsis; overflow: hidden; }
對於 text-overflow 的支持度,是根據它的屬性值來判定的,不同的屬性值瀏覽器支持度不同。
屬性值 |
Opera |
|
Firefox |
Chrome |
IE |
Safari |
clip |
9.63+ |
|
2.0+ |
1.0+ |
6.0+ |
3.1+ |
ellipsis |
10.5+ |
|
6.0+ |
1.0+ |
6.0+ |
3.1+ |
//在 Opera 早期版本 10.0 ~ 10.1 中,需要使用帶首碼的-o-。
p { -o-text-overflow: ellipsis; text-overflow: ellipsis; }
而在 Opera 主流版本中,引擎已經靠攏 webkit,則不需要-o-了。目前來說,也不需要相容-o-了。
三.文本描邊
CSS3 提供了描邊屬性,即 text-stroke、text-stroke-width、text-stroke-color。目前只有 webkit 引擎的瀏覽器支持,並且必須加上-webkit-首碼才能有效。
屬性 |
Opera |
Firefox |
Chrome |
IE |
Safari |
text-stroke 系列 |
15.0+ |
不支持 |
4.0+ |
不支持 |
3.1+ |
//實驗階段的產物,瞭解即可
p { font-size: 50px; -webkit-text-stroke: 1px red; }
//修改描邊的顏色和厚度
p { font-size: 50px; -webkit-text-stroke: 1px red; -webkit-text-stroke-color: orange; -webkit-text-stroke-width: 2px; }
四.文本填充
CSS3 提供了一個文本顏色填充功能:text-fill-color,感覺和 color 屬性很像。其實在配合其他屬性才能達到不一樣的效果。
屬性 |
Opera |
Firefox |
Chrome |
IE |
Safari |
text-fill-color |
15.0+ |
不支持 |
4.0+ |
不支持 |
3.1+ |
//不配合背景樣式時,和 color 屬性沒區別
p { font-size: 150px; -webkit-text-fill-color: red; }
//和 CSS3 背景的新特性搭配產生漸變文字
p { font-size: 150px; font-family: 黑體; background: -webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }