纯css打造几款漂亮的字体效果，相信各位站长会喜欢，直接看效果吧，还是那句老话，低版本ie浏览器勿扰

如若只如初见，何须感伤离别

LOVE HATE
如若只如初见何须感伤离别

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> TEXT-SHADOW打造漂亮的字体效果-柏平</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
body {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.font {width: 800px;overflow: hidden; text-align: center; border:1px solid #ddd;box-shadow: 0 5px 6px rgba(44,4,255,0.5) ;}
	.vintage{
background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
text-shadow: 5px -5px black, 4px -4px white;
font-weight: bold;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text }

.stroke{
color: transparent;
-webkit-text-stroke: 1px black;
letter-spacing: 0.04em;
background-color: }
 

 .pre {
color: transparent;
background-color : black;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
}

.beat{
color: #fafafa;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }

.font2 {
  overflow: hidden;
  height: 100%;
  font-family: Geneva, sans-serif;
  background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%));
}


p {
    margin: 0;
}


#box {
  padding:45% 100px;
  text-align: center;
  min-width: 500px;
  font-size: 3em;
  font-weight: bold;
  -webkit-backface-visibility: hidden; /* fixes flashing */
}

#flashlight {
  color: hsla(0,0%,0%,0);
  perspective: 80px;
  outline: none;
}

#flash {
  display: inline-block;
  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
  transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
}
    
#box:hover #flash {
  margin-left: 20px;
  transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1);
}

#light {
  display: inline-block;
  text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
}
</style>
<body>
<div class="font">
<h1 class="vintage">如若只如初见，何须感伤离别</h1>
<h1 class="stroke">如若只如初见，何须感伤离别</h1>
<h1 class="pre">如若只如初见，何须感伤离别</h1>
<h1 class="beat">如若只如初见，何须感伤离别</h1>
</div>
<div class="font2">
	<div id="box">
  <p id="flashlight">
    <span id="flash">LOVE</span>
    <span id="light">HATE</span><br>
    <span id="light">如若只如初见</span>
    <span id="flash">何须感伤离别</span>
  </p>
</div>
</div>
</body>
</html>