CSS3---文本阴影
2019-04-09 08:51
141 查看
CSS3 text-shadow 属性
实例
基础的文本阴影效果:
h1{ text-shadow: 5px 5px 5px #FF0000; }
效果图:
语法
text-shadow: h-shadow v-shadow blur color;
注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
值 | 描述 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
小案例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .demo{ font-size: 80px; background-color: #808080; width: 800px; margin: 30px auto; text-align: center; color: white; font-weight: bolder; } .demo1{ text-shadow: -2px -2px 8px red; } .demo2{ text-shadow: 0px 0px 30px #fff; } .demo3{ text-shadow: 0px 0px 30px #fff,0px 0px 50px red; } .demo4{ color: black; text-shadow: 0px 1px 0px #fff; } .demo5{ color: white; text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd ,-3px -3px 0px #ccc ,-4px -4px 0px #bbb; } .demo6{ color: transparent; text-shadow: 0px 0px 8px hsla(30,100%,30%,1); } </style> </head> <body> <div class="demo demo1">好好学习,天天向上</div> <div class="demo demo2">好好学习,天天向上</div> <div class="demo demo3">好好学习,天天向上</div> <div class< 20000 span class="token punctuation">="demo demo4">好好学习,天天向上</div> <div class="demo demo5">好好学习,天天向上</div> <div class="demo demo6">好好学习,天天向上</div> </body> </html>
效果图:
相关文章推荐
- CSS3一览(1) 文本阴影和渐变
- 【CSS3】---文本阴影text-shadow
- HTML5+CSS3-第三节(文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩、)
- CSS3 应用01 - 文本阴影效果(兼容IE 7-9 Firefox Opera Chrome 等多浏览器)
- CSS3之文本凹凸效果(阴影效果)
- ☀【CSS3】文本阴影 text-shadow
- 【CSS3】---文本阴影text-shadow
- CSS3之颜色模式、文本阴影、盒子模型、私有化前缀
- CSS3边框图片、边框阴影、文本阴影
- css3 text-shadow设计文本阴影
- CSS3文本阴影text-shadow属性详解
- CSS3文字与字体 文本阴影text-shadow
- CSS3---文本阴影text-shadow
- 【CSS3】---文本阴影text-shadow
- css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现
- css3新增的文本高级样式-文本阴影和文本溢出
- CSS3文字与字体:text-overflow 与 word-wrap、@font-face、文本阴影text-shadow
- css3设置文本阴影的属性
- 笔记:CSS3文本阴影换行字体等
- web基础学习(六)CSS3 文字阴影、文本溢出、服务器字体