点击刷新
text-shadow [tɛkst] - [ˈʃædoʊ]
定义：
text-shadow: none | <shadow> [,<shadow>]*
<shadow><length>{2,3} && color
- <length>--1:阴影的水平偏移量，正值阴影在右侧，负值阴影在左侧，必填
- <length>--2:阴影的垂直偏移量，正值阴影在底部，负值阴影在顶部，必填
- <length>--3:阴影的模糊距离，必须为正值，值越大，阴影边缘越模糊，非必填
- color：阴影颜色
注：
- <length>必须为具体的长度单位值，不可使用百分比
- 可以为一个元素指定多个阴影
示例：
1).霓虹灯效果
.demo1{ text-shadow: 0 0 20px #fff; color: #fff; }
.demo1{ color: #fff; /*添加多个阴影效果*/ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de; }
2).投影效果
.demo2{ color: #000; text-shadow: 0 1px 1px #fff; }
3).浮雕效果
.demo3{ color: #ccc; text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444; }
4).模糊效果
.demo4{ color: transparent; text-shadow: 0 0 5px #f96; }
5).3D效果
.demo5{ color: #fff; /*text-shadow不支持阴影外延，所以使用多个阴影效果模拟*/ text-shadow: 1px 1px rgba(197, 223, 248,0.8), 2px 2px rgba(197, 223, 248,0.8), 3px 3px rgba(197, 223, 248,0.8), 4px 4px rgba(197, 223, 248,0.8), 5px 5px rgba(197, 223, 248,0.8), 6px 6px rgba(197, 223, 248,0.8); }
6).复古效果
.demo6{ color: #eee; text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; }
© 著作权归作者所有
举报
相关热门文章
发表评论
0/200
