CSS text-stroke
text-stroke屬性可以設定文字的描邊效果。
文字的描邊就類同於文字的邊框,原來只有<div>這樣的元素才可以設定邊框,現在文字也可以。
它是一個複合屬性,語法結構如下:
[CSS] 純文字檢視 複製程式碼text-stroke:[ text-stroke-width ] || [ text-stroke-color ]
引數解析:
(1).text-stroke-width:設定元素中文字的描邊厚度。
(2).text-stroke-color:設定元素中文字的描邊顏色。
瀏覽器支援:
(1).IE11+瀏覽器支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).火狐瀏覽器支援此屬性。
(4).谷歌瀏覽器支援此屬性。
(5).Safari瀏覽器支援此屬性。
(6).opera瀏覽器支援此屬性。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ font-size:100px; text-stroke:2px #45B823; -webkit-text-stroke:2px #45B823; -moz-text-stroke:2px #45B823; } </style> </head> <body> <div>螞蟻部落</div> </body> </html>
上面的程式碼實現了設定文字描邊的效果;text-stroke是一個複合屬性,也可以將它們拆開單獨設定:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ font-size:100px; text-stroke-width:2px; -webkit-text-stroke-width:2px; text-stroke-color:#45B823; -webkit-text-stroke-color:#45B823; } </style> </head> <body> <div>螞蟻部落</div> </body> </html>
相關文章
- CSS3 text-strokeCSSS3
- css 命名:BEM, scoped css, css modules 與 css-in-jsCSSJS
- 【CSS】CSS常用技巧CSS
- CSS——CSS基礎(1)CSS
- CSS速刷 - CSS效果CSS
- CSS速刷 - CSS動畫CSS動畫
- CSS中的“大白”——CSS 動畫CSS動畫
- CSS——CSS 值和單位CSS
- 【CSS】【3】CSS選擇器CSS
- 【CSS】【11】CSS盒子的定位CSS
- 【CSS】CSS前期回顧(2)CSS
- 【CSS】CSS前期回顧(1)CSS
- CSS系列:CSS常用樣式CSS
- CSS系列:CSS選擇器CSS
- CSS系列:CSS文字樣式CSS
- CSS系列:CSS表格樣式CSS
- CSS佈局入門[css]CSS
- css12 CSS HEX ColorsCSS
- css15 CSS MarginsCSS
- css18 CSS Box ModelCSS
- css38 CSS Image SpritesCSSS3
- css43 CSS SpecificityCSS
- css44 CSS The !important RuleCSSImport
- css45 CSS Math FunctionsCSSFunction
- CSSCSS
- 【CSS】CSS簡介,CSS基礎選擇器詳解CSS
- CSS——CSS 結構和層疊CSS
- CSS系列 (03):CSS三大特性CSS
- WebRTC與CSS濾鏡(CSS filter)WebCSSFilter
- 【CSS】【7】CSS的盒子模型CSS模型
- CSS系列:CSS中盒子模型CSS模型
- css11 CSS RGB ColorsCSS
- css16 CSS PaddingCSSpadding
- css23 CSS Links, CursorsCSS
- css26 CSS Layout - The display PropertyCSS
- css34 CSS Opacity / TransparencyCSSS3
- Css規範整理:2、css盒模型CSS模型
- CSS基礎:CSS變數簡介CSS變數