CSS3字型發光效果

2022-01-12 09:21:30 字數 887 閱讀 2721

不得不說css玩的6的人就是狂拽酷炫叼炸天!

本文**:

本篇文章由:

css3 並沒有直接設定發光效果的屬性,但是可以利用 text-shadow 屬性實現此效果

該屬性為文字新增陰影效果

text-shadow: h-shadow v-shadow blur color;
h-shadow: 水平陰影的位置(陰影水平偏移量),可為負值,必需

v-shadow: 垂直陰影的位置(陰影垂直偏移量),可為負值,必需

blur: 陰影模糊的距離(預設為0),可選

color: 陰影顏色(預設為當前字型顏色),可選

乍一看,text-shadow 屬性僅僅是用來設定文字陰影的,似乎並不能實現字型發光效果。

其實不然,這正是 text-shadow 屬性的精妙之處。

當陰影的水平偏移量和垂直偏移量都為0時,陰影就和文字重合了

這時,如果增大陰影模糊的距離,就可以達到字型外發光的效果了。

當然,為了使外發光更加酷炫,還需要使用到 text-shadow 的另乙個特性: 同時設定多個陰影(使用逗號分隔設定多個陰影)

CSS3 字型樣式

lang en charset utf 8 css3的其他屬性title type text css font face 宣告使用伺服器端字型 伺服器端字型對otf和ttf這兩種字型格式支援良好 font face p box sizing 設定width和height屬性值包含的內容。div di...

css3字型樣式

一 font family的使用 font family屬性可以設定html文字的字型樣式,eg.注意 當字型名稱中包括空格 之類的符號,則使用 font family 可以把多個字型名稱作為乙個 回退 系統來儲存。如果瀏覽器不支援第乙個字型,則會嘗試下乙個。也就是說,font family 屬性的...

前端CSS3 字型樣式

一 font family設定字型 sans serif是專指西文中沒有襯線的字型 例如 為網頁中的文字設定字型為 宋體 text css body 或body style 二 font size設定字型大小 例如 設定網頁中文字的字型大小為12畫素。text css body style 三 fo...