手把手教你：纯CSS打造不一样的文本编辑器
我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！
前言
在我们的日常工作中，输入输出代码和编辑文本是我们接触最多的地方。这是必不可少的部分。
看到这里，是不是每个人的DNA都在动？立即拿起键盘，输入几行代码。回到主题，那么我们可以改变我们编辑文本的方式吗？或者，改变编辑文本的样式？答案是肯定的，在 HTML 提供了一个命名 内容可编辑 指示用户是否可以编辑元素的属性。接下来，我将使用此属性对文本编辑器进行改造。
显示结果
代码块显示
实施思路和流程
上图是本次的文字编辑效果。接下来，我将逐步解释这个想法和过程。
这次不用传统的输入框了 输入 ，利用 输入 输入框有很多限制，这里不使用。改为使用 内容可编辑 要创建，这个属性是最关键的，用这个属性可以编辑。
<h1 contenteditable= "true">你怎么样？</h1>
复制代码
然后开始给予 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 版权协议，转载请附上原文出处链接和本声明
