头闻号

山东奥纳化工有限公司

填充剂|脱模剂|其他合成材料助剂|其他未分类|增塑剂|阻垢剂

首页 > 新闻中心 > 科技常识:使用字符代替圆角尖角研究心得分享
科技常识:使用字符代替圆角尖角研究心得分享
发布时间:2024-12-25 10:42:28        浏览次数:4        返回列表

今天小编跟大家讲解下有关使用字符代替圆角尖角研究心得分享 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关使用字符代替圆角尖角研究心得分享 的相关资料,希望小伙伴们看了有所帮助。

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

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

这里左右方向的尖角 字体为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:○

这里是四分之一圆弧 字体为宋体:t sq r

这里是四分之一圆弧 字体为Arial:t sq r

这里是四分之一圆弧 字体为Lucida Sans Unicode:t sq r

这里是四分之一圆弧 字体为Times New Roman:t sq r

这里是四分之一圆弧 字体为Verdana:t sq r

二、实现四分之一实体圆

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

●●●●

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像素上下错位 矩形双层标签 实现最终的双边框效果。

来源:爱蒂网