手把手教你：纯CSS打造一个不一样的文本编辑

前言

  在日常工作中，输入输出代码、编辑文本是我们接触最多的地方。这是必不可少的一部分。

  看到这里，大家 DNA 动了吗，立刻拿起键盘去敲几行代码😎。回到正题，那么我们能改变编辑文本的方式吗？或者说，改变编辑文本的样式？答案是肯定可以的，在HTML中提供了一个名为contenteditable的属性，表示元素是否可被用户编辑。接下来，我将通过这个属性让文本编辑改头换面。

效果展示

代码块展示

实现思路及过程

  上面展示的便是此次的文本编辑效果，接下来我将一步一步来讲解思路及过程。

  这次并没有用到传统的输入框input，使用input输入框有很多局限性，因此在这里不使用它。而是使用contenteditable来打造的，这个属性是当中最关键的，有了这个属性才能进行编辑。

<h1 contenteditable="true">How aer you?</h1>

  然后开始给h1设置样式了。在这里添加了倾斜角度以及文本阴影效果，使它变得更具有3D立体感。倾斜由transform属性设置，文本阴影由text-shadow设置。

  若要生成有层次感的阴影，只需从1px一点一点的添加就行，最后给阴影设置好颜色即可。此外，这里额外添加了一个use-select:none属性，表示防止选取div元素的文本。在这里不添加也是可以的，因为并没有div元素，添加它是为了让大家认识更多标签属性，之后总会有用得到的时候。

  user-select: none;
  transform: rotate(-10deg) skewX(20deg);
  text-shadow: -1px 1px #cacaca,
                 -2px 2px #cacaca,
                 -3px 3px #cacaca,
                 -4px 4px #cacaca,
                 -5px 5px #cacaca,
                 -6px 6px #cacaca,
                 -7px 7px #cacaca,
                 -8px 8px #cacaca,
                 -9px 9px #cacaca,
                 -10px 10px #cacaca,
                 -11px 11px #cacaca,
                 -12px 12px #cacaca,
                 -13px 13px #cacaca;

结语

  这样一个与众不同的文本编辑，大家可以在闲暇时间里去编辑试试，体验一下不同的编辑效果。一直用传统的文本编辑，或许在这里会有不一样的体验和收获😎。