CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现。
一、定义文本阴影
可以给文字添加阴影效果了 Shadow 影子
语法:
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 | none;
-
- none:表示默认值,没有阴影;
- 水平位置:表示对象的阴影水平偏移值,可为负值
- 垂直位置:表示对象的阴影垂直偏移值,可为负值
- 模糊距离:设置对象的阴影模糊值,不允许负值
- 阴影颜色:设置阴影的颜色
扩展:可以给 text-shadow 设置多个值,表示多阴影的文字,可以来多很多的特效。
Demo:凹凸文字的特效
样式:
1 div { 2 color: #ccc; 3 font: 700 80px "微软雅黑"; 4 } 5 div:first-child { 6 /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */ 7 text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; 8 } 9div:last-child { 10 /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */ 11 text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; 12}
结构:
1 <div>我是凸起的文字</div>
2 <div>我是凹下的文字</div>
扫描二维码关注公众号,回复:
6680065 查看本文章