欢迎！我白天是个邮递员，晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都，有条叫做Jack的狗。
css开发第一个字符制作圆形文字图标效果，非常简单，先固定一个圆形span标签宽高为，圆角 50%，然后设定行高，让字符垂直居中，设定 overflow: hidden，限制字符溢出，然后设定 letter-spacing: 200px,让字符间距变大，不让第二个字符显示到span中，然后设定 text-indent: 12px，这个字符图标就用css实现了。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>04 第一个字符串生成文字图标</title></head><body><div><ul><li><span>第一个字符串生成文字图标</span>第一个字符串生成文字图标</li><li><span>用CSS可以做什么？</span>用CSS可以做什么？</li><li><span>前端的致命诱惑</span>前端的致命诱惑</li></ul></div></body></html>CSS代码
*{margin: 0;padding: 0;list-style: none;transition: .5s;}html,body{background-color: #f5f5f5;color: #fff;font-size: 14px;}.app{width: 100%;height: 100vh;position: relative;display: flex;justify-content: center;align-items: center;}.app ul {max-width: 300px;}.app ul li{width: 100%;color: #152239;font-size: 16px;line-height: 42px;margin: 15px 0;float: left;}.app ul li span{width: 42px;height: 42px;line-height: 40px;color: #1E47ED;font-size: 18px;font-weight: 700;text-indent: 12px;border-radius: 50%;display: block;float: left;overflow: hidden;background-color: #eaeaea;letter-spacing: 20px;margin-right: 15px;}
