纯CSS3创意字体样式代码

一款纯CSS3创意字体样式代码，通过设置文字的多重字体阴影，实现了比较复杂的创意字体样式效果，字体样式的大小和颜色都可以自由修改。

分类：文字特效难易：初级

查看演示下载资源下载积分： 8 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，设置好页面元素的样式，重点学习一下text-shadow的超多重阴影设置，代码如下：

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  background: papayawhip;
}

h1 {
  text-shadow: 1px 1px #506b1a, 2px 2px #506b1a, 3px 3px #506b1a, 4px 4px #506b1a, 5px 5px #506b1a, 6px 6px #506b1a, 7px 7px #506b1a, 8px 8px #506b1a, 9px 9px #506b1a, 10px 10px #506b1a, 11px 11px #506b1a, 12px 12px #506b1a, 13px 13px #506b1a, 14px 14px #506b1a, 15px 15px #506b1a, -1px 1px olivedrab, -2px 2px olivedrab, -3px 3px olivedrab, -4px 4px olivedrab, -5px 5px olivedrab, -6px 6px olivedrab, -7px 7px olivedrab, -8px 8px olivedrab, -9px 9px olivedrab, -10px 10px olivedrab, -11px 11px olivedrab, -12px 12px olivedrab, -13px 13px olivedrab, -14px 14px olivedrab, -15px 15px olivedrab, -1px -1px #90aa5a, -2px -2px #90aa5a, -3px -3px #90aa5a, -4px -4px #90aa5a, -5px -5px #90aa5a, -6px -6px #90aa5a, -7px -7px #90aa5a, -8px -8px #90aa5a, -9px -9px #90aa5a, -10px -10px #90aa5a, -11px -11px #90aa5a, -12px -12px #90aa5a, -13px -13px #90aa5a, -14px -14px #90aa5a, -15px -15px #90aa5a, 1px -1px olivedrab, 2px -2px olivedrab, 3px -3px olivedrab, 4px -4px olivedrab, 5px -5px olivedrab, 6px -6px olivedrab, 7px -7px olivedrab, 8px -8px olivedrab, 9px -9px olivedrab, 10px -10px olivedrab, 11px -11px olivedrab, 12px -12px olivedrab, 13px -13px olivedrab, 14px -14px olivedrab, 15px -15px olivedrab, 0 -1px #364712, 0 -2px #364712, 0 -3px #364712, 0 -4px #364712, 0 -5px #364712, 0 -6px #364712, 0 -7px #364712, 0 -8px #364712, 0 -9px #364712, 0 -10px #364712, 0 -11px #364712, 0 -12px #364712, 0 -13px #364712, 0 -14px #364712, 0 -15px #364712, 0 1px #364712, 0 2px #364712, 0 3px #364712, 0 4px #364712, 0 5px #364712, 0 6px #364712, 0 7px #364712, 0 8px #364712, 0 9px #364712, 0 10px #364712, 0 11px #364712, 0 12px #364712, 0 13px #364712, 0 14px #364712, 0 15px #364712, -1px 0 #90aa5a, -2px 0 #90aa5a, -3px 0 #90aa5a, -4px 0 #90aa5a, -5px 0 #90aa5a, -6px 0 #90aa5a, -7px 0 #90aa5a, -8px 0 #90aa5a, -9px 0 #90aa5a, -10px 0 #90aa5a, -11px 0 #90aa5a, -12px 0 #90aa5a, -13px 0 #90aa5a, -14px 0 #90aa5a, -15px 0 #90aa5a, 1px 0 #364712, 2px 0 #364712, 3px 0 #364712, 4px 0 #364712, 5px 0 #364712, 6px 0 #364712, 7px 0 #364712, 8px 0 #364712, 9px 0 #364712, 10px 0 #364712, 11px 0 #364712, 12px 0 #364712, 13px 0 #364712, 14px 0 #364712, 15px 0 #364712;
  font: 100 108px/1 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  letter-spacing: 20px;
  text-align: center;
  color: goldenrod;
}

页面的body部分，仅需设置好相应的标题文字即可，代码如下：

<h1>素材火<br><br>www.sucaihuo.com</h1>