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

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

一、字體與字符顯示的關系

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

這里左右方向的尖角，字體為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度尖角邊形實體，字體為Arial：&ang;

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

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

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

這里是實體尖角，字體為宋體：? ? ▲▼

這里是實體尖角，字體為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像素上下錯位，矩形雙層標簽，實現最終的雙邊框效果。

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