text-shadow 文本阴影
text-shadow属性 可以为文本 添加 一个或多个的阴影效果。
注意：多个阴影，指定用逗号分隔开来。
语法：
text-shadow: h-shadow v-shadow blur color;
1个阴影的制作如下所示
<style>.txt1{font-size: 30px;/* 第一个值垂直偏移 第二个值水平偏移 第三个像素·值越大越模糊 */text-shadow: 5px 5px 1px red;}</style></head><body><h1 class="txt1">我是中国人，爱写中国字</h1></body>
text-shadow里面第一个值垂直偏移 第二个值水平偏移 第三个像素·值越大越模糊
预览效果图
利用css3实现如下凸型字体(两个阴影) 制作如下所示
<style>body{background-color: #808080;}.box1{width: 600px;margin: 100px auto 0;}.box1 h1{color: gray;font-size: 80px;/* 给文本添加两个阴影两个阴影 设置的偏移方向不同 ，使用的颜色不同 */text-shadow: 1px 1px 1px black,-1px -1px 1px white;}</style></head><body><div class="box1"><h1>我喜欢CSS3</h1></div></body>
预览效果图
利用css3实现如下凹型字体(两个阴影)制作如下所示
<style>body{background-color: #808080;}.box1{width: 600px;margin: 100px auto 0;}.box1 h1{color: gray;font-size: 80px;/* 给文本添加两个阴影两个阴影 设置的偏移方向不同 ，使用的颜色不同 */text-shadow: -1px -1px 1px black,1px 1px 1px white;}</style></head><body><div class="box1"><h1>我喜欢CSS3</h1></div></body>
预览效果图
多阴影制作如下所示
<style>body{background-color: #f1eee7;}.box1{width: 800px;margin: 100px auto 0;/* outline: 1px dashed red; */color: white;}.box1 h1{font-size: 100px;text-align: center;/* 模糊距离为0 代表阴影是清晰可见的 */text-shadow: 1px 1px 0px #ccc,2px 2px 0px #ccc,3px 3px 0px #444,4px 4px 0px #444,5px 5px 0px #444,6px 6px 0px #444;}</style></head><body><div class="box1"><h1>3D CSS TEXT</h1></div><div class="box1"><h1>李先生</h1></div></body>
预览效果图
