“Css文字效果”的版本间的差异

来自产品维基百科
跳转至： 导航、 搜索
（创建页面，内容为“https://blog.csdn.net/szwangdf/article/details/385260”）
 
 
（未显示同一用户的15个中间版本）
第1行： 第1行：
 +
 +
<br>
 +
<center><font size="6" color=blue;">'''文字效果'''</font></center>
 +
<font size="5" color="#545454>
 +
 +
 +
<div class="parent">
 +
        <h1 data-heading="hello">hello</h1>
 +
    </div>
 +
 +
<font size="5" color="#545454  Direction ="20">123456
 +
</font>
 +
 +
陰影角度
 +
 +
■CSS文字特效：
 +
　文字陰影效果：
 +
 +
Filter:Shadow(color=Value;Direction=Value;Zoom:Value;Padding:Value)
 +
語法：{ Filter: Shadow (參數) }
 +
參數：Color 顏色 , Direction (0、90、180、270) 陰影角度
 +
 +
<font style=FILTER: Shadow(color=#8888ff,direction=150);height=10 color="#0066FF">文字</font>
 +
 +
　文字陰影效果：加入Padding
 +
 +
<font style="filter: shadow(color=#8888ff,direction=270); zoom:1; padding:5px;" color="#0066ff">文字</font>
 +
 +
　發光字體效果
 +
 +
Filter:Glow(color=Value;Strength=Value)
 +
語法：{ Filter: Glow (參數) }
 +
參數：Color 顏色 , Strength 範圍
 +
 +
<font style="filter: glow(color=#FF9900,strength=3); height:10px; color:white; padding:1px">文字</font>
 +
 +
　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 幅度
 +
 +
<font style="filter: blur(strength=3,direction=150); height:10px; color:white; padding:1px">文字</font>
 +
 +
 +
<!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>
 +
<ul>
 +
<li><a href="#home">主页</a></li>
 +
<li><a href="#news">新闻</a></li>
 +
<li><a href="#contact">联系</a></li>
 +
<li><a href="#about">关于</a></li>
 +
</ul>
 +
</body>
 +
</html>
 +
 
https://blog.csdn.net/szwangdf/article/details/385260
 
https://blog.csdn.net/szwangdf/article/details/385260
 +
 +
[https://blog.csdn.net/whqet/article/details/24793049]

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]

取自“http://cpwiki.sseuu.com/index.php?title=Css文字效果&oldid=20101”