第 21 章 CSS3 文本效果

来源:http://www.cnblogs.com/zfc2201/archive/2016/05/01/5450074.html
-Advertisement-
Play Games

學習要點: 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;
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 學習要點: 1.定位佈局 2.box-sizing 3.resize 主講教師:李炎恢 本章主要探討 HTML5 中 CSS 早期所使用的傳統佈局,很多情況下,這些佈局方式還是非常有用的。 一.定位佈局 在使用定位佈局前,我們先瞭解一下定位屬性的用法。CSS2 提供了 position 屬性來實現元 ...
  • 列表組可以用來製作列表清單、垂直導航等效果,也可以配合其他的組件製作出更漂亮的組件,列表組在bootstrap框架中也是一個獨立的組件,所以也對應有自己獨立源碼: LESS:list-group.less SASS:_list-group.scss 列表組看上去就是去掉了列表符號的列表項,並且配上一... ...
  • 學習要點: 1.佈局模型 2.表格佈局 3.浮動佈局 主講教師:李炎恢 本章主要探討 HTML5 中 CSS 早期所使用的傳統佈局,很多情況下,這些佈局方式還是非常有用的。 一.佈局模型 在早期沒有平板和智能手機等移動設備大行其道的時期,Web 頁面的設計主要是面向 PC 端電腦解析度展開的。這種分 ...
  • 學習要點: 1.動畫簡介 2.屬性詳解 3.簡寫和版本 主講教師:李炎恢 本章主要探討 HTML5 中 CSS3 的動畫效果,可以通過類似 Flash 那樣的關鍵幀模式控制運行。 一.動畫簡介 CSS3 提供了類似 Flash 關鍵幀控制的動畫效果,通過 animation 屬性實現。那麼之前的 t ...
  • 學習要點: 1.過渡簡介 2.transition-property 3.transition-duration 4.transition-timing-function 5.transition-delay 6.簡寫和版本 主講教師:李炎恢 本章主要探討 HTML5 中 CSS3 的過渡效果,通過 ...
  • 學習要點: 1.屬性初探 2.屬性解釋 3.簡寫和版本 主講教師:李炎恢 本章主要探討 HTML5 中 CSS3 中邊框圖片背景的效果,通過這個新屬性讓邊框更加的豐富多彩。 一.屬性解釋 CSS3 提供了一個新的屬性集合,用這幾個屬性可以嵌入圖片形式的邊框。這樣,邊框就可以自定義了。 學習要點: 1 ...
  • Markdown Notepad 如果給大家介紹一個Markdown編輯器不有什麼特點或差異, 真沒必要在這裡給大家推薦. 開始使用Markdown Notepad跟其他同品不一樣的地方在於: 多標簽可以同時打開多個文件、編輯和預覽 自動保存與恢復無需手工保存,即便關閉甚至終止瀏覽器也不會丟失數據 ...
  • 學習要點: 1.線性漸變 2.徑向漸變 主講教師:李炎恢 本章主要探討 HTML5 中 CSS3 背景漸變功能,主要有兩種漸變方式:線性漸變和徑向(放射性)漸變。 一.線性漸變 CSS3 提供了 linear-gradient 屬性實現背景顏色的漸變功能。在以前,這種效果必須採用圖片才能實現的。首先 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...