使用字符代替圆角尖角研究心得分享

所属分类: 网页制作 / 应用技巧 阅读数: 534
收藏 0 赞 0 分享

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

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

这里左右方向的尖角,字体为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像素上下错位,矩形双层标签,实现最终的双边框效果。
更多精彩内容其他人还在看

关于培养色感,自己的一些方法

关于培养色感,自己的一些方法
收藏 0 赞 0 分享

SSI技术—SHTML的解释(生成静态时用的最火)

SSI技术—SHTML的解释(生成静态时用的最火)
收藏 0 赞 0 分享

标签(Tag)的定义和作用精解

标签(Tag)的定义和作用精解
收藏 0 赞 0 分享

网页中防止表格被撑破的css代码

网页中防止表格被撑破的css代码
收藏 0 赞 0 分享

SSH 使用原理 与解释

SSH 使用原理 与解释
收藏 0 赞 0 分享

UTF-8编码问题BOM详细介绍

UTF-8编码问题BOM详细介绍
收藏 0 赞 0 分享

photoworks下载及象框使用教程[图文]

photoworks下载及象框使用教程[图文]
收藏 0 赞 0 分享

比较详细的一篇关于autorun.inf的讲解

比较详细的一篇关于autorun.inf的讲解
收藏 0 赞 0 分享

缩放文字,不仅仅只是缩放文字

缩放文字,不仅仅只是缩放文字
收藏 0 赞 0 分享

验证可通过正版验证的Office2007最新的两个序列号

验证可通过正版验证的Office2007最新的两个序列号
收藏 0 赞 0 分享
查看更多