开发指南117-文字阴影特效
标题行标签可以通过阴影增加效果,最核心的是text-shadow
语法
text-shadow: h-shadow v-shadow blur color;
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
color:可选。阴影的颜色。
可以多个数据叠加产生酷炫效果,例如:
h3 {
width:110px;
margin:0px;
padding-top: 4px;
padding-left: 15px;
padding-bottom: 4px;
box-sizing: border-box;
border-bottom: 2px solid #0064B4;
text-align: left;
font-family: $defaultWidgetFont;
font-weight: 500;
color: #FF5050;
text-shadow:0px 1px 0px #c0c0c0,
0px 2px 0px #b0b0b0,
0px 3px 0px #a0a0a0,
0px 4px 0px #909090,
0px 5px 10px rgba(0, 0, 0, .9);
}
效果: