DDR爱好者之家

使用字符代替圆角尖角研究心得分享
站长资源 2024/12/25 佚名
61 1538
DDR爱好者之家 Design By 杰米

一、字体与字符显示的关系

这里左右方向的尖角，字体为宋体：<> 
不受字体影响型：＜＞

这里左右方向的尖角，字体为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代码：

复制代码代码如下:
&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;lt&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;rt&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;lb&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;rb&quot;&gt;●&lt;/span&gt;&lt;/span&gt;

三、实现实色背景的圆角矩形

以四分之一实体圆填充四个角实现含有背景色的圆角效果。

●●●●

四、实现含有尖角指示的实色背景的圆角矩形

以四分之一实体圆填充四个角，添加尖角符，实现带尖角的实色圆角矩形。

▲●●●● 以四分之一实体圆填充四个角，添加尖角符，实现带尖角的实色圆角矩形。

五、实现新浪微博针对博文评论的含尖角的双边框圆角矩形效果

以四分之一实体圆填充四个角，重复一次，1像素错位。添加尖角符，2像素上下错位，矩形双层标签，实现最终的双边框效果。

◆◆●●●● 以四分之一实体圆填充四个角，重复一次，1像素错位。添加尖角符，2像素上下错位，矩形双层标签，实现最终的双边框效果。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米