用css做一个凸起的字体框

昨天在群里看到有人想做一个凸起的字体框。我今天几分钟就搞定了，觉得挺巧妙的。分享最终效果如下。代码在这里：https://codepen.io/woshilyy/p...一开始我以为把上下圆角矩形拼接起来就可以了，NONONO，其实交叉处有圆角两个圆角，可以看到这个圆角，可以用白色的圆角覆盖，那么问题来了：白色的圆角覆盖之后，中间会形成一个缝隙，这个缝隙需要充满蓝色。所以思路是这样的：1.首先创建两个圆角矩形：HTML:2:圆角在上面加一个蓝色矩形左右两侧的圆角矩形，与上下矩形相切，但长宽不能超过上下两个大矩形][2]三：在后面添加的蓝色小矩形块上，各加一个相同大小的白色矩形覆盖，分别设置右下圆角和左下圆角，代码如下：border-radius:0020px0;边界半径：00020px；好的，你完成了！一个凸框就做好了。如果大家有更好的方法，请指教~菜鸟第一篇文章