（7.19）前端体验课学习笔记1

最新推荐文章于 2023-05-05 19:01:58 发布

赵晨 Goddyn

最新推荐文章于 2023-05-05 19:01:58 发布

阅读量240

点赞数 2

本文链接：https://blog.csdn.net/weixin_42509915/article/details/96511449

版权

抖音风格字体效果的实现

CSS的常用属性一览：

属性	功能	值的例子
color	前景色	pink
background-color	背景色	yellow
width	宽度（px）	200px
height	高度（px）	200px
font-family	字体	“微软雅黑”
font-size	字体大小	48px
font-weight	字体粗细	200
text-shadow	文本阴影	#f03740 -1px -3px

注意:属性text-shadow中阴影颜色+水平偏移量（负数表示向左偏移）+垂直偏移量（负数表示向上偏移）

分析：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抖音风格字体效果</title>
  <style>
    body {
      background: gray;
    }
    h1 {
      font-size: 48px;
      color: white;
      text-shadow: #f03740 -1px -3px, #2addfd 3px 0px;
    }
  </style>
</head>
<body>
  <h1>我爱前端</h1>
</body>
</html>