Css文字效果

来自产品维基百科
明华讨论 | 贡献2019年12月7日 (六) 13:51的版本
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索


文字效果


hello

123456

陰影角度

■CSS文字特效:  文字陰影效果:

Filter:Shadow(color=Value;Direction=Value;Zoom:Value;Padding:Value) 語法:{ Filter: Shadow (參數) } 參數:Color 顏色 , Direction (0、90、180、270) 陰影角度

文字

 文字陰影效果:加入Padding

文字

 發光字體效果

Filter:Glow(color=Value;Strength=Value) 語法:{ Filter: Glow (參數) } 參數:Color 顏色 , Strength 範圍

文字

 CSS教學首頁連結發光效果

<a href="連結網址" _fcksavedurl=""連結網址"" style="filter: glow(color=#3366FF,strength=3); height:10px; color:blue; padding:1px">連結文字</a>

 字體模糊效果

Filter:Blur(Strength=Value;Direction=Value) 語法:{ Filter: Blur (參數) } 參數:Direction (0、90、180、270) 模糊角度 , Strength 幅度

文字


<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#7A991A; } </style> </head>

<body>

  • <a href="#home">主页</a>
  • <a href="#news">新闻</a>
  • <a href="#contact">联系</a>
  • <a href="#about">关于</a>

</body> </html>

https://blog.csdn.net/szwangdf/article/details/385260

[1]