实现原理
看起来是图形，实际是白色的文字勾勒出的轮廓
利用css的“首选最小宽度”构建图形，根据英文单词不换行的特性，我们就可以控制什么地方“凹”，什么地方“凸”啦！
首选最小宽度
- 东亚文字（如中文）最小宽度为每个汉字的宽度
- 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。例如，“display:inline-block”这几个字符以连接符“-”作为分隔符，形成了“display:inline”和“block”两个连续单元，由于连接符“-”分隔位置在字符后面，因此，最后的宽度就是“display:inline-”的宽度
- 类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。
完整范例代码
<template> <div> <span class="ao"></span> <span class="tu"></span> </div> </template> <style scoped> .ao, .tu { display: inline-block; width: 0; font-size: 14px; line-height: 18px; margin: 35px; color: #fff; } .ao:before, .tu:before { outline: 2px solid #cd0000; font-family: Consolas, Monaco, monospace; } .ao:before { content: "love你love"; } .tu { direction: rtl; } .tu:before { content: "我love你"; } </style>
