看到邮票边框效果我第一反应就是直接找边框,但是CSS中的边框都是线形的,并没有圆点状的边框,这可就麻烦了,而项目中这个邮票状元素的背景又有好几种颜色,如果是一种还可以接受图片来代替,这么多用图片就有点不合适了。这可如何是好,中间想到过用内连SVG解决,但是想法很好现实却是残酷的,PS中导出的SVG并不是真正的矢量图,用文档工具打开之后其实里面就是一个 image 标签里面是一个base54编码的图片。想到前几天用CSS做复选框,其中使用了Unicode编码中的 “✔”和“●”,想到这问题迎刃而解,这不就是我们最开始要找的要找圆点吗?

其实我们经常会想到字体图标,但却经常忘了每个设备都有的Unicode符号,下面是效果。

<p data-height="325" data-theme-id="light" data-slug-hash="rLVXzN" data-default-tab="css,result" data-user="zhangchen915" data-embed-version="2" class="codepen">See the Pen 邮票边框 by zhangchen (@zhangchen915) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>