使用字符代替圆角尖角的方法教程
本篇内容介绍了"使用字符代替圆角尖角的方法教程"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
一、字体与字符显示的关系
这里左右方向的尖角，字体为宋体：<>
不受字体影响型：＜＞
这里左右方向的尖角，字体为Arial：<>
不受字体影响型：＜＞
这里左右方向的尖角，字体为Lucida Sans Unicode：<>
不受字体影响型：＜＞
这里左右方向的尖角，字体为Times New Roman：<>
不受字体影响型：＜＞
这里左右方向的尖角，字体为Verdana：<>
不受字体影响型：＜＞
这里上下方向的尖角，字体为宋体，小尖角：ˇ^
不受字体影响型：∧∨
这里上下方向的尖角，字体为Arial，小尖角：ˇ^
不受字体影响型：∧∨
这里上下方向的尖角，字体为Lucida Sans Unicode，小尖角：ˇ^
不受字体影响型：∧∨
这里上下方向的尖角，字体为Times New Roman，小尖角：ˇ^
不受字体影响型：∧∨
这里上下方向的尖角，字体为Verdana，小尖角：ˇ^
不受字体影响型：∧∨
这里是45度尖角，字体为宋体：∠
这里是45度尖角边形实体，字体为Arial：∠
这里是45度尖角，字体为Lucida Sans Unicode：∠
这里是45度尖角，字体为Times New Roman：∠
这里是45度尖角，字体为Verdana：∠
这里是实体尖角，字体为宋体：► ◄ ▲▼
这里是实体尖角，字体为Arial：► ◄ ▲▼
这里是实体尖角，字体为Lucida Sans Unicode：► ◄ ▲▼
这里是实体尖角，字体为Times New Roman：► ◄ ▲▼
这里是实体尖角，字体为Verdana：► ◄ ▲▼
这里是实体圆，由于大小有限，表现类似一个六边形实体，字体为宋体：●
这里是实体圆，由于大小有限，表现类似一个六边形实体，字体为Arial：●
这里是实体圆，由于大小有限，表现类似一个六边形实体，字体为Lucida Sans Unicode：●
这里是实体圆，由于大小有限，表现类似一个六边形实体，字体为Times New Roman：●
这里是实体圆，由于大小有限，表现类似一个六边形实体，字体为Verdana：●
这里是一个空心的圆形，字体为宋体：○
这里是一个空心的圆形，字体为Arial：○
这里是一个空心的圆形，字体为Lucida Sans Unicode：○
这里是一个空心的圆形，字体为Times New Roman：○
这里是一个空心的圆形，字体为Verdana：○
这里是四分之一圆弧，字体为宋体：╰ ╯╭ ╮
这里是四分之一圆弧，字体为Arial：╰ ╯╭ ╮
这里是四分之一圆弧，字体为Lucida Sans Unicode：╰ ╯╭ ╮
这里是四分之一圆弧，字体为Times New Roman：╰ ╯╭ ╮
这里是四分之一圆弧，字体为Verdana：╰ ╯╭ ╮
二、实现四分之一实体圆
以四分之一实体圆填充四个角实现含有背景色的圆角效果。
● ● ● ●
css代码：
代码如下:
.quarter_round{display:inline-block; width:8px; height:8px; overflow:hidden; font-family:'宋体';}.quarter_round span{display:inline-block; font-size:16px; line-height:1;}.quarter_round .lt{}.quarter_round .rt{margin-left:-7px;}.quarter_round .lb{margin-top:-6px;}.quarter_round .rb{margin:-6px 0 0 -7px;}
HTML代码：
代码如下:
<span class="quarter_round"><span class="lt">●</span></span><span class="quarter_round"><span class="rt">●</span></span><span class="quarter_round"><span class="lb">●</span></span><span class="quarter_round"><span class="rb">●</span></span>
三、实现实色背景的圆角矩形
以四分之一实体圆填充四个角实现含有背景色的圆角效果。
●●●●
四、实现含有尖角指示的实色背景的圆角矩形
以四分之一实体圆填充四个角，添加尖角符，实现带尖角的实色圆角矩形。
▲●●●●
以四分之一实体圆填充四个角，添加尖角符，实现带尖角的实色圆角矩形。
五、实现新浪微博针对博文评论的含尖角的双边框圆角矩形效果
以四分之一实体圆填充四个角，重复一次，1像素错位。添加尖角符，2像素上下错位，矩形双层标签，实现最终的双边框效果。
◆◆●●●●
以四分之一实体圆填充四个角，重复一次，1像素错位。添加尖角符，2像素上下错位，矩形双层标签，实现最终的双边框效果。
"使用字符代替圆角尖角的方法教程"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
