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

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

反饋

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

開始之前

在開始之前，請確保你具備以下條件：

HTML 和 CSS 的基本知識
對 Tailwind CSS 有初步的了解

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

第一步：設置項目

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

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

第二步：添加 Tailwind CSS

為了簡化設置，我們將通過 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：設置圓形元素的寬度和高度為 8rem（32 × 0.25rem）
bg-blue-500：設置背景顏色為藍色
rounded-full：將元素設置為圓形
flex、items-center 和 justify-center：使用 Flexbox 布局居中對齊內(nèi)容
text-white：設置文本顏色為白色
font-bold：設置字體加粗
text-sm：設置字體大小為 0.875rem

輸出效果

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

自定義你的圓形元素

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

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

響應式設計

Tailwind CSS 支持響應式設計，你可以為不同屏幕尺寸設置不同的樣式：

<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">
    響應式圓形元素
</div>

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