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

我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！

前言

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

看到这里，是不是每个人的DNA都在动？立即拿起键盘，输入几行代码。回到主题，那么我们可以改变我们编辑文本的方式吗？或者，改变编辑文本的样式？答案是肯定的，在 HTML 提供了一个命名 内容可编辑 指示用户是否可以编辑元素的属性。接下来，我将使用此属性对文本编辑器进行改造。

显示结果

代码块显示

实施思路和流程

上图是本次的文字编辑效果。接下来，我将逐步解释这个想法和过程。

这次不用传统的输入框了 输入 ，利用 输入 输入框有很多限制，这里不使用。改为使用 内容可编辑 要创建，这个属性是最关键的，用这个属性可以编辑。

你怎么样？

复制代码

然后开始给予 h1 设置样式。此处添加了倾斜角度和文字阴影效果，使其更有趣 3D 立体。倾斜 转换 属性集，文字阴影由 文字阴影 设置。

要生成分层阴影，只需开始 1像素 一点一点地添加，最后设置阴影的颜色。此外，这里还有一个 使用选择：无 属性，表示防止选择 div 元素的文本。这里不加也可以，因为没有 div 元素，添加它是为了让大家更多地了解标签属性，以后总会有用的。

用户选择：无；
变换：旋转（- 10 度） skewX（20 度）；
文字阴影： - 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;
复制代码

结语

这么独特的文本编辑器，你可以在业余时间尝试编辑，体验不一样的编辑效果。如果你一直在使用传统的文本编辑，在这里你可能会有不同的体验和收获。

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接： https://homecpp.art/1822/10217/1705

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38830/31162311