文字描边效果可以通过text-shadow来实现，也可以通过-webkit-text-stroke来实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字描边效果</title><style>body{width: 100vw;height: 100vh;margin: 0;padding: 0;overflow: hidden;display: flex;justify-content: center;align-items: center;}.text-container{width: 100%;height: 100%;text-align: center;line-height: 100vh;background: linear-gradient(45deg, #e45c08, #1309d7); /* 从左上到右下的渐变 */}.text{font-size: 100px;font-weight: 1500;/* 这种方式也能实现但是不支持文字透明 *//* text-shadow: 0 2px #fff,0 -2px #fff,-2px 2px #fff,2px -2px #fff,-2px 0 #fff,2px 0 #fff; *//* 这种方式支持文字透明，但是兼容性可能有问题 */-webkit-text-stroke: 2px #fff;color: transparent;}</style>
</head>
<body><div class="text-container"><span class="text">哀吾生之须臾，羡长江之无穷</span></div></body>
</html>