亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2013-09-12 15:10:38   作者：佚名   我要評論
字符代替圓角尖角也是一種在不使用代碼和圖片的另類實現(xiàn)吧，本文整理了一些常用的示例，感興趣的朋友可以收藏下

一、字體與字符顯示的關(guān)系

這里左右方向的尖角，字體為宋體：<> 
不受字體影響型：＜＞

這里左右方向的尖角，字體為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：► ◄ ▲▼

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為宋體：●

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為Arial：●

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為Lucida Sans Unicode：●

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為Times New Roman：●

這里是實體圓，由于大小有限，表現(xiàn)類似一個六邊形實體，字體為Verdana：●

這里是一個空心的圓形，字體為宋體：○

這里是一個空心的圓形，字體為Arial：○

這里是一個空心的圓形，字體為Lucida Sans Unicode：○

這里是一個空心的圓形，字體為Times New Roman：○

這里是一個空心的圓形，字體為Verdana：○

這里是四分之一圓弧，字體為宋體：╰ ╯╭ ╮

這里是四分之一圓弧，字體為Arial：╰ ╯╭ ╮

這里是四分之一圓弧，字體為Lucida Sans Unicode：╰ ╯╭ ╮

這里是四分之一圓弧，字體為Times New Roman：╰ ╯╭ ╮

這里是四分之一圓弧，字體為Verdana：╰ ╯╭ ╮

二、實現(xiàn)四分之一實體圓

以四分之一實體圓填充四個角實現(xiàn)含有背景色的圓角效果。

● ● ● ●

css代碼：

復(fù)制代碼
代碼如下:

.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代碼：

復(fù)制代碼
代碼如下:

&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;

三、實現(xiàn)實色背景的圓角矩形

以四分之一實體圓填充四個角實現(xiàn)含有背景色的圓角效果。

●●●●

四、實現(xiàn)含有尖角指示的實色背景的圓角矩形

以四分之一實體圓填充四個角，添加尖角符，實現(xiàn)帶尖角的實色圓角矩形。

▲●●●●
以四分之一實體圓填充四個角，添加尖角符，實現(xiàn)帶尖角的實色圓角矩形。

五、實現(xiàn)新浪微博針對博文評論的含尖角的雙邊框圓角矩形效果

以四分之一實體圓填充四個角，重復(fù)一次，1像素錯位。添加尖角符，2像素上下錯位，矩形雙層標(biāo)簽，實現(xiàn)最終的雙邊框效果。

◆◆●●●●
以四分之一實體圓填充四個角，重復(fù)一次，1像素錯位。添加尖角符，2像素上下錯位，矩形雙層標(biāo)簽，實現(xiàn)最終的雙邊框效果。

相關(guān)文章

最新評論