css凹凸字型和發光字型程式碼例項
分享一段程式碼例項,它實現了利用css繪製凹凸字型和發光字型的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box { width: 200px; height: 200px; float: left; padding: 10px; margin: 10px 20px; color: #333; text-align: center; font-size: 16px; font-weight: bold; } .letterpress{ background: hsl(210, 13%, 40%); color: hsl(210, 13%, 75%); text-shadow: 0 -1px 1px black; } .highlight { color: #ffc; text-shadow: 0 0 .2em, 0 0 .3em; } .extruded { color: white; text-shadow: 0 1px hsl(0,0%,85%), 0 2px hsl(0,0%,80%), 0 3px hsl(0,0%,75%), 0 4px hsl(0,0%,70%), 0 5px hsl(0,0%,65%), 0 5px 10px black; } </style> </head> <body> <div class="box" style="background:hsl(210, 13%, 40%)"> <p class="letterpress">凸板印刷效果</p> <p class="highlight">文字外發光效果</p> <p class="extruded">文字凸起效果</p> </div> </body> </html>
使用text-shadow屬性即可實現,具體可以參閱CSS3 text-shadow一章節。
相關文章
- CSS 凹凸字型和發光字型CSS
- CSS載入遠端字型例項程式碼CSS
- css設定placeholder字型顏色程式碼例項CSS
- CSS3 translate導致字型模糊的例項程式碼CSSS3
- CSS3發光背景程式碼例項CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3
- CSS3發光字型幾種效果CSSS3
- jQuery實現設定字型大小程式碼例項jQuery
- 橫屏時候字型變大程式碼例項
- javascript動態設定字型的大小程式碼例項JavaScript
- 移動端字型大小自適應程式碼例項
- js字型顏色隨機變化效果程式碼例項JS隨機
- js判斷變數是不是數字型別程式碼例項JS變數型別
- CSS 字型新玩法之彩色字型CSS
- CSS font 字型CSS
- 3、CSS 字型CSS
- CSS--字型CSS
- css3帶有光暈的流星效果程式碼例項CSSS3
- css字型設定CSS
- css字型樣式CSS
- css梯形程式碼例項CSS
- CSS 設定字型顏色和大小CSS
- CSS3 七 字型CSSS3
- css字型font-familyCSS
- CSS 顏色與字型CSS
- css切角效果程式碼例項CSS
- CSS 對聯程式碼例項CSS
- css分割線程式碼例項CSS線程
- css模糊效果程式碼例項CSS
- CSS RGBA 程式碼例項CSS
- 字型圖示固用程式碼
- css中文字型亂碼解決方案CSS
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- css字型樣式屬性CSS
- css實現炫彩字型CSS
- Css字型圖示引入方式CSS
- 純css tab選項卡程式碼例項CSS
- CSS 隔行變色程式碼例項CSS