CSS3文本阴影text-shadow属性详解
2016-08-08 11:45
706 查看
文本阴影text-shadow属性特效:
1.右下角阴影,左下角阴影,左上角阴影,右上角阴影
文字效果为:
如果将text-shadow改成:text-shadow:-10px 10px #333 ,就将出现左下角阴影
将text-shadow改成:text-shadow:-10px -10px #333 , 就将出现左上角阴影
将text-shadow改成:text-shadow: 10px -10px #333 , 就将出现右上角阴影
2. 使用text-shadow设置立体文字效果
以上这篇CSS3文本阴影text-shadow属性详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
1.右下角阴影,左下角阴影,左上角阴影,右上角阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text-shadow</title> <style> p{ text-align:center; margin:0; font-family: helvetica,arial,sans-serif; color:#999; font-size:80px; font-weight:bold; text-shadow:10px 10px #333; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
文字效果为:
如果将text-shadow改成:text-shadow:-10px 10px #333 ,就将出现左下角阴影
将text-shadow改成:text-shadow:-10px -10px #333 , 就将出现左上角阴影
将text-shadow改成:text-shadow: 10px -10px #333 , 就将出现右上角阴影
2. 使用text-shadow设置立体文字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text-shadow</title> <style> p{ text-align:center; margin:0; font-family: helvetica,arial,sans-serif; color:#999; font-size:80px; font-weight:bold; text-shadow:-1px -1px #fff, 1px 1px #333; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
以上这篇CSS3文本阴影text-shadow属性详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章推荐
- CSS3---文本阴影text-shadow
- ☀【CSS3】文本阴影 text-shadow
- CSS3实战1-文本属性text-shadow的用法
- CSS的定位属性实现text-shadow属性的文本下产生阴影效果
- 【CSS3】---文本阴影text-shadow
- CSS3文字与字体:text-overflow 与 word-wrap、@font-face、文本阴影text-shadow
- CSS3新增属性text-shadow详解及燃烧的字体实战开发
- css3文本属性text-shadow
- 【CSS3】---文本阴影text-shadow
- CSS3属性box-shadow详解[盒子阴影]
- css2属性text-shadow为文本加上阴影效果
- CSS3新增属性text-shadow详解及燃烧的字体实战开发
- 【CSS3】文本阴影text-shadow
- CSS3文本阴影text-shadow
- 利用css3的text-shadow属性实现文字阴影乳白效果
- css3 text-shadow设计文本阴影
- CSS3之文本阴影text-shadow
- CSS3 经典教程系列:CSS3 阴影(text-shadow)详解
- 【CSS3】---文本阴影text-shadow
- 【CSS3】---文本阴影text-shadow