使用字符代替圓角尖角的方法教程

本篇內(nèi)容介紹了“使用字符代替圓角尖角的方法教程”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

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

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

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

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

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

這里上下方向的尖角，字體為宋體，小尖角：ˇ^ 
不受字體影響型：&and;&or;

這里上下方向的尖角，字體為Arial，小尖角：ˇ^ 
不受字體影響型：&and;&or;

這里上下方向的尖角，字體為Lucida Sans Unicode，小尖角：ˇ^ 
不受字體影響型：&and;&or;

這里上下方向的尖角，字體為Times New Roman，小尖角：ˇ^ 
不受字體影響型：&and;&or;

這里上下方向的尖角，字體為Verdana，小尖角：ˇ^ 
不受字體影響型：&and;&or;

這里是45度尖角，字體為宋體：&ang;

這里是45度尖角邊形實(shí)體，字體為Arial：&ang;

這里是45度尖角，字體為Lucida Sans Unicode：&ang;

這里是45度尖角，字體為Times New Roman：&ang;

這里是45度尖角，字體為Verdana：&ang;

這里是實(shí)體尖角，字體為宋體：? ? ▲▼

這里是實(shí)體尖角，字體為Arial：? ? ▲▼

這里是實(shí)體尖角，字體為Lucida Sans Unicode：? ? ▲▼

這里是實(shí)體尖角，字體為Times New Roman：? ? ▲▼

這里是實(shí)體尖角，字體為Verdana：? ? ▲▼

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

● ● ● ●

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;

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

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

●●●●

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

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

▲●●●●

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

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

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

◆◆●●●●

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

“使用字符代替圓角尖角的方法教程”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！