卡卡網(wǎng)

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

demodownload

實(shí)例代碼

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>

代碼解釋

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

這個(gè)實(shí)例涉及兩個(gè)知識點(diǎn)，一個(gè)是如何畫一個(gè)實(shí)心圓，二是如何讓文字居中。

畫一個(gè)實(shí)心圓

首先，實(shí)心圓的CSS很簡單，如下：

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

關(guān)鍵代碼是設(shè)置border-radius的屬性值為50%。background是設(shè)置實(shí)心圓的顏色。width和height是實(shí)心圓的直徑。

文字的定位

下面是文字的定位設(shè)置：

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

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

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

總結(jié)

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

相關(guān)文章

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

標(biāo)簽: css  圓圈  圓圈文字  文字  實(shí)心圓