text-shadow 简单介绍

text-shadow 属性应用于文本阴影。

1
2
3
text{
  text-shadow:h-shadow v-shadow blur color;
}
属性值 描述
h-shadow 必需。水平X轴方向，阴影的位置。允许负值。
v-shadow 必需。垂直Y轴方向，阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。（不选为透明）

演示效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
	<view class="content">
		<view class=" ">
			CSDN
		</view>
	</view>
</template>

<style>
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}
</style>

浮雕效果

1
2
3
4
5
6
7
8
9
10
<style>
	/* 浮雕 */
	.embossment {
		font-size: 100rpx;
		font-weight: 600;
		color: #DDDDDD;
		text-shadow: 2rpx 2rpx 0rpx rgba(0, 0, 0, 1),
      				-2rpx -2rpx 0rpx rgba(255, 255, 255, 1);
	}
</style>

在这里插入图片描述

镂空效果

1
2
3
4
5
6
7
8
9
10
<style>
	/* 镂空 */
	.hollow-out {
		font-size: 100rpx;
		font-weight: 600;
		color: #DDDDDD;
		text-shadow: -2rpx -2rpx 0rpx rgba(0, 0, 0, 1),
      				2rpx 2rpx 0rpx rgba(255, 255, 255, 1);
	}
</style>

在这里插入图片描述

荧光效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
	/* 荧光 */
	.fluorescent {
		font-size: 100rpx;
		font-weight: 600;
		color: #FFFFFF;
		text-shadow: 0rpx 0rpx 4rpx rgba(0, 255, 255, 1.0),
			0rpx 0rpx 10rpx rgba(0, 255, 255, 1.0),
			0rpx 0rpx 20rpx rgba(0, 255, 255, 1.0),
			0rpx 0rpx 30rpx rgba(0, 255, 255, 1.0);
		/* text-shadow: 0rpx 0rpx 4rpx rgba(255, 68, 0, 1.0),
			0rpx 0rpx 10rpx rgba(255, 68, 0, 1.0),
			0rpx 0rpx 20rpx rgba(255, 68, 0, 1.0),
			0rpx 0rpx 30rpx rgba(255, 68, 0, 1.0); */
	}
</style>