“Css文字效果”的版本间的差异
| （未显示同一用户的7个中间版本） | |||
| 第5行： | 第5行： | ||
| + | <div class="parent"> | ||
| + | <h1 data-heading="hello">hello</h1> | ||
| + | </div> | ||
<font size="5" color="#545454 Direction ="20">123456 | <font size="5" color="#545454 Direction ="20">123456 | ||
</font> | </font> | ||
| + | |||
陰影角度 | 陰影角度 | ||
| 第17行： | 第21行： | ||
參數：Color 顏色 , Direction (0、90、180、270) 陰影角度 | 參數：Color 顏色 , Direction (0、90、180、270) 陰影角度 | ||
| − | <font style=FILTER: Shadow(color=8888ff,direction=150);height=10 color="#0066FF">文字</font> | + | <font style=FILTER: Shadow(color=#8888ff,direction=150);height=10 color="#0066FF">文字</font> |
文字陰影效果：加入Padding | 文字陰影效果：加入Padding | ||
| − | <font style="filter: shadow(color=8888ff,direction= | + | <font style="filter: shadow(color=#8888ff,direction=270); zoom:1; padding:5px;" color="#0066ff">文字</font> |
發光字體效果 | 發光字體效果 | ||
| 第42行： | 第46行： | ||
<font style="filter: blur(strength=3,direction=150); height:10px; color:white; padding:1px">文字</font> | <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>
