卡卡網(wǎng)

在瀏覽網(wǎng)站時，我們經(jīng)?？吹绞褂冒谋镜膱A圈，這個要怎樣實現(xiàn)呢？其實，只需要一點CSS技巧，就能實現(xiàn)這個效果。本文將介紹如何用CSS實現(xiàn)帶有文本的圓圈。

demodownload

實例代碼

CSS

.circle {
  background: burlywood;
  border: 10px solid #000;
  color: #000;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  font: 80px Arial, sans-serif;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

HTML

<div class="circle">webkaka.com</div>

代碼解釋

我們看到，代碼很簡單，實現(xiàn)方法是作一個實心圓的div，而div里的內(nèi)容便是實心圓里的文字，我們只需用CSS調(diào)整文字的位置居中即可。

這個實例涉及兩個知識點，一個是如何畫一個實心圓，二是如何讓文字居中。

畫一個實心圓

首先，實心圓的CSS很簡單，如下：

background: burlywood;
width: 500px;
height: 500px;
border-radius: 50%;

關鍵代碼是設置border-radius的屬性值為50%。background是設置實心圓的顏色。width和height是實心圓的直徑。

文字的定位

下面是文字的定位設置：

justify-content: center;  
align-items: center;  
text-align: center;  
display: flex;

justify-content是水平布局，與之對應的是垂直布局align-item，text-align是水平居中，display: flex;是彈性布局，該屬性可以讓文字垂直居中。

至此，CSS實現(xiàn)文字在圓圈內(nèi)就完成了。

總結(jié)

本文介紹了如何使用CSS實現(xiàn)文字在圓圈內(nèi)并居中，通過本文的學習，我們應該了解到CSS如何作圓，以及文字的布局設置、定位等相關知識。

相關文章

• CSS+SVG：畫圓并且文字寫在圓中間
• 130個純CSS3圖標(CSS icons)【#下載#收藏】
• 【實例】CSS3畫一個半圓的方法
• css3畫實心圓和圓角的方法
• 2例精美CSS3圓角表格#懸停高亮行#斑馬條紋行#
• 純CSS實現(xiàn)圓角樣式的4種寫法，比CSS3兼容性更好

標簽: css  圓圈  圓圈文字  文字  實心圓