主要知识点：
1、text-shadow，这个属性主要是实现了字体阴影效果，当很多个阴影叠加在一起的时候，就形成了立体的效果
2、CSS3变换transform，使用transform属性的skewX()，实现字体在水平方向上倾斜；
3、字间距letter-spacing，使用字间距只要是为了在视觉上有较好的体验！
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css字体立体效果</title>
<style>
body{
font-size: 60px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#center{
font-weight: bold;
transform: skewX(40deg);
letter-spacing: 10px;
text-shadow: -1px 1px aqua,
-2px 2px aqua,-3px 3px aqua,-4px 4px aqua,-5px 5px aqua,-6px 6px aqua,-7px 7px aqua,-8px 8px aqua,-9px 9px aqua,-10px 10px aqua;
}
</style>
</head>
<body>
<div id="center">读心悦</div>
</body>
</html>
文章评论