如何使用 Tailwind CSS 創(chuàng)建帶文本的圓形元素

編程獅（w3cschool.cn） 2025-05-23 15:39:45 瀏覽數(shù) (272)

反饋

在現(xiàn)代網(wǎng)頁設(shè)計(jì)中，創(chuàng)建具有吸引力的 UI 元素是提升用戶體驗(yàn)的關(guān)鍵。今天，我將向大家介紹如何使用 Tailwind CSS 快速創(chuàng)建一個(gè)帶文本的圓形元素。Tailwind CSS 是一個(gè)功能強(qiáng)大的實(shí)用程序優(yōu)先的 CSS 框架，它讓開發(fā)人員能夠快速構(gòu)建自定義設(shè)計(jì)，而無需離開 HTML 文件。

開始之前

在開始之前，請(qǐng)確保你具備以下條件：

HTML 和 CSS 的基本知識(shí)
對(duì) Tailwind CSS 有初步的了解

創(chuàng)建帶文本的圓形元素

第一步：設(shè)置項(xiàng)目

首先，創(chuàng)建一個(gè)新的項(xiàng)目文件夾，并進(jìn)入該文件夾：

mkdir circle-text-project
cd circle-text-project

第二步：添加 Tailwind CSS

為了簡化設(shè)置，我們將通過 CDN 引入 Tailwind CSS：

<!DOCTYPE html>
<html lang="zh">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帶文本的圓形元素 | 編程獅(w3cschool.cn)</title>
    <link  rel="stylesheet">
</head>


<body class="flex items-center justify-center h-screen bg-gray-100">
    <div class="flex items-center justify-center">
        <div class="w-32 h-32 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-center leading-tight text-sm">
            編程獅教程
        </div>
    </div>
</body>


</html>

代碼解析

w-32 和 h-32：設(shè)置圓形元素的寬度和高度為 8rem（32 × 0.25rem）
bg-blue-500：設(shè)置背景顏色為藍(lán)色
rounded-full：將元素設(shè)置為圓形
flex、items-center 和 justify-center：使用 Flexbox 布局居中對(duì)齊內(nèi)容
text-white：設(shè)置文本顏色為白色
font-bold：設(shè)置字體加粗
text-sm：設(shè)置字體大小為 0.875rem

輸出效果

以上代碼將創(chuàng)建一個(gè)藍(lán)色的圓形元素，其中包含白色加粗的文本“編程獅教程”，并且文本在圓形中居中顯示。

自定義你的圓形元素

你可以通過修改 Tailwind CSS 的實(shí)用程序類來自定義圓形元素的外觀：

更改顏色：將 bg-blue-500 替換為其他顏色類，如 bg-green-500 或 bg-red-500
調(diào)整大小：修改 w-32 和 h-32 為其他尺寸類，如 w-24 h-24 或 w-40 h-40
更改字體大?。簩?text-sm 替換為其他字體大小類，如 text-xs 或 text-base

響應(yīng)式設(shè)計(jì)

Tailwind CSS 支持響應(yīng)式設(shè)計(jì)，你可以為不同屏幕尺寸設(shè)置不同的樣式：

<div class="w-32 h-32 md:w-40 md:h-40 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-center leading-tight text-sm md:text-lg">
    響應(yīng)式圓形元素
</div>

在這個(gè)例子中，圓形元素在默認(rèn)情況下寬度和高度為 8rem，但在中等及以上屏幕尺寸下會(huì)變?yōu)?10rem。