CSS文字效果

前言

---

最近读诗，分享一句诗：“凭君莫话封侯事，一将功成万骨枯”。开始正文，今天实现的效果，如图：

以上主要用了text-shadow、background-clip，-webkit-background-clip、css3d、writing-mode、column-count相关知识。奉上代码。

---

默认效果

 <div class="card" style="font-size: 1.5em">床前明月光，疑是地上霜</div>

---

阴影

text-shadow:（offset-x,offset-y,blur;color）

无模糊

 <div class="card" style="text-shadow: 10px 5px #fc0; font-size: 1.5em">
        床前明月光，疑是地上霜
 </div>

添加模糊

 <div class="card" style="text-shadow: 10px 5px 2px #fc0; font-size: 1.5em">
        床前明月光，疑是地上霜
 </div>

不同方向叠加无模糊

 <div class="card"
      style="text-shadow: 5px 5px red, -5px -5px orange, 5px -5px green,-5px 5px blue;
      font-size: 1.5em;">
        床前明月光，疑是地上霜
 </div>

文字描边（text-shadow实现）

 <div class="card"
        style="text-shadow: 1px 0px red, -1px -0px red, 0px -1px red, 0px 1px red;
          font-size: 1.5em;">
        床前明月光，疑是地上霜
 </div>

不同方向叠加有模糊

阴影叠加

 <div class="card"
        style="text-shadow: 5px 5px 3px red, -5px -5px 3px orange, 5px -5px 3px green,-5px 5px 3px blue;
          font-size: 1.5em;">
        床前明月光，疑是地上霜
 </div>

文字发光

阴影叠加，改变方向或改变羽化值

 <div class="card"
        style="text-shadow: 1px 0px 3px orange, 2px 1px 3px red, -2px 0px 7px yellow;
          font-size: 1.5em;">
        床前明月光，疑是地上霜
 </div>

第一种3d效果

去掉阴影模糊，相同方向叠加

 <div class="card"
      style="text-shadow: 1px 1px gray, 2px 2px gray, 3px 3px gray;
        font-size: 1.5em;">
        床前明月光，疑是地上霜
 </div>

特殊阴影

 <div class="card"
      style="text-shadow: 2px 2px white, 3px 3px black;
        font-size: 1.5em;">
        床前明月光，疑是地上霜
 </div>

沉浸式文字

背景和字体颜色相同，加点阴影

 <div class="card"
       style="color: white;
          text-shadow: 1px 0px 1px gray, 1px 0px 1px gray, 1px 0px 1px gray,1px 0px 1px gray;
          font-size: 1.5em;">
        床前明月光，疑是地上霜
 </div>

文字描边（-webkit-text-stroke）

 <div class="card"
      style="color: transparent;
          font-size: 1.5em;
          -webkit-text-stroke: 1px gray;
          font-weight: bold;">
        床前明月光，疑是地上霜
 </div>

---

渐变文字

常规渐变

background-clip:text、-webkit-background-clip:text、color:transparent

<div class="card">
        <div
          style="background: linear-gradient(90deg, red, rgb(255, 185, 0));
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
            font-size: 1.5em;">
          床前明月光，疑是地上霜
        </div>
</div>

刚性渐变

 <div class="card">
        <div style="background-image: linear-gradient(to right, black 50%, red 50%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
            font-size: 1.5em;">
          床前明月光，疑是地上霜
        </div>
 </div>

条纹文字

 <div class="card">
        <div
          style="background-image: repeating-linear-gradient(to right,orange, orange 2px,red 2px,red 4px);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
            font-size: 1.5em;">
          床前明月光，疑是地上霜
        </div>
 </div>

另一种3d字体

css3d

.layer {
        position: absolute;
      }
.layer::before {
        content: "窗前明月光，疑是地上霜";
      }

<div class="card">
        <div
          style="width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transform: rotate3d(1, 1, 1, 20deg);
            font-size: 1.5em;
            display: grid;
            place-items: center;
          "
        >
          <div class="layer" style="transform: translateZ(0px)"></div>
          <div class="layer" style="transform: translateZ(-1px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-2px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-3px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-4px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-5px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-6px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-7px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-8px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-9px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-10px);color: red;"></div>
          <div class="layer" style="transform: translateZ(-11px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-12px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-13px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-14px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-15px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-16px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-17px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-18px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-19px);color: orange;"></div>
          <div class="layer" style="transform: translateZ(-20px);color: orange;"></div>
        </div>
</div>

背景分割文字

 <div class="card" style="background-image: linear-gradient(45deg, black 50%, white 50%)">
        <div
          style="background-image: linear-gradient(45deg, white 50%, black 50%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
            font-size: 1.5em;">
          床前明月光，疑是地上霜
        </div>
 </div>

---

段落

默认效果

 <div class="card">
        青山横北郭，白水绕东城。 <br />此地一为别，孤蓬万里征。<br />
        浮云游子意，落日故人情。 <br />挥手自兹去，萧萧班马鸣。
 </div>

单行不换行

<div class="card" style="display: flex; align-items: center">
        <span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
          青山横北郭，白水绕东城。 此地一为别，孤蓬万里征。
          浮云游子意，落日故人情。 挥手自兹去，萧萧班马鸣。
        </span>
</div>

竖排文字

<div class="card" style="writing-mode: vertical-rl">
        青山横北郭，白水绕东城。 此地一为别，孤蓬万里征。
        浮云游子意，落日故人情。 挥手自兹去，萧萧班马鸣。
</div>

添加线一

 <div class="card" style="writing-mode: vertical-rl; text-decoration: overline">
        青山横北郭，白水绕东城。 此地一为别，孤蓬万里征。
        浮云游子意，落日故人情。 挥手自兹去，萧萧班马鸣。
 </div>

添加线二

 <div class="card" style="writing-mode: vertical-rl; text-decoration: underline">
        青山横北郭，白水绕东城。 此地一为别，孤蓬万里征。
        浮云游子意，落日故人情。 挥手自兹去，萧萧班马鸣。
 </div>

添加线三

 <div class="card"
     style="writing-mode: vertical-rl; text-decoration: line-through">
        青山横北郭，白水绕东城。 此地一为别，孤蓬万里征。
        浮云游子意，落日故人情。 挥手自兹去，萧萧班马鸣。
 </div>

分栏

column-count

 <div class="card"
        style="display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 8px; " >
        <div style="text-align: center">
          雨霖铃·寒蝉凄切 <i>——[宋] 柳永</i>
        </div>
        <div style="column-count: 3;
            font-size: 0.5em;
            overflow: hidden;
            text-indent: 2em; " >
          寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。
          多情自古伤离别，更那堪冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？
        </div>
 </div>

字符间距

letter-spacing

 <div class="card"
        style="display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 8px;">
        <div style="text-align: center">
          雨霖铃·寒蝉凄切
          <i>——[宋] 柳永</i>
        </div>
        <div style="column-count: 3;
            font-size: 0.5em;
            overflow: hidden;
            text-indent: 2em;
            letter-spacing: 3px;">
          寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。
          多情自古伤离别，更那堪冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？
        </div>
 </div>

行间距

line-height

 <div class="card"
        style="display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 8px;">
        <div style="text-align: center">
          雨霖铃·寒蝉凄切
          <i>——[宋] 柳永</i>
        </div>
        <div
          style="column-count: 3;
            font-size: 0.5em;
            overflow: hidden;
            text-indent: 2em;
            letter-spacing: 3px;
            line-height: 160%;">
          寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。
          多情自古伤离别，更那堪冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？
        </div>
 </div>

---