在阅读书籍的时候看到了利用css首选最小宽度的特点我们可以同纯css来写出凹凸两个图形，看截图:
分享下实现的方式，代码如如下：
<style>
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
color: #fff;
}
.ao:before,
.tu:before {
outline: 2px solid greenyellow;
font-family: Consolas, Monaco, monospace;
}
.ao:before {
content: "dada你dada";
}
.tu {
direction: rtl;
}
.tu:before {
content: "我dada你";
}
</style>
<body>
<span class="ao"></span>
<span class="tu"></span>
</body>
当在设置inlin-block的width为0时，当内部有文字的时候显示的宽度为0么？当然不会，我们知道，在css世界里文字的权重时相当高的，文字和图片的权重远大于布局，所以此时首选最小宽度出现了，在中文中，首选最小宽度是每个汉字，在英文中，最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。
看图就很好理解：
