DIV CSS 佈局教程網

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

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

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