CSS 动态邮件查收效果

<template>
	<view class="content">
		<view class="tooltip-container">
			<text class="tooltip">查看</text>
			<text class="text">@</text>
		</view>
	</view>
</template>

<script>

</script>

<style>
	body {
		background-color: #212121;
		/* 设置背景颜色为 #212121 */
	}

	.content {
		display: flex;
		/* 使用弹性布局 */
		flex-direction: column;
		/* 设置主轴方向为垂直方向 */
		align-items: center;
		/* 在交叉轴上居中对齐 */
		justify-content: center;
		/* 在主轴上居中对齐 */
		margin-top: 300px;
		/* 设置顶部外边距为 300px */
	}

	.tooltip-container {
		height: 70px;
		/* 设置高度为 70px */
		width: 110px;
		/* 设置宽度为 110px */
		border-radius: 5px;
		/* 设置边框圆角为 5px */
		background-color: #fff;
		/* 设置背景颜色为 #fff */
		background-image: linear-gradient(to left bottom,
				/* 设置背景渐变色