• 使用字符代替圆角尖角研究


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

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

    这里左右方向的尖角,字体为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像素上下错位,矩形双层标签,实现最终的双边框效果。
     




  • 相关阅读:
    jquery 使用on方法给元素绑定事件
    bootstrap 学习笔记(部分)
    ajax 调用 webService
    ASP.NET 上传文件
    SQL 表 数据备份
    在控制台程序中,添加config文件
    webConfig的使用
    C# 下载文件的心得
    JS将页面中表格,导出到Excel中(IE中)
    Yahoo 军规(部分)
  • 原文地址:https://www.cnblogs.com/zjx2011/p/2746487.html
Copyright © 2020-2023  润新知