在網頁設計中，氣泡框（或工具提示）是一種常見的UI元素，用于突出顯示信息或提供額外說明。本文將介紹如何使用純CSS創建一個簡單的氣泡框，并添加一個三角形指示器。
HTML結構
首先，我們有一個簡單的HTML結構：
<div class="border">我是一個氣泡框
</div>
CSS樣式
讓我們逐步分析CSS實現：
1. 基礎容器樣式
.border{position: relative;background: gray;width: 200px;margin: 200px auto;height: 100px;border-radius: 20px;padding: 20px;box-sizing: border-box;
}
position: relative：為偽元素定位提供參考background: gray：設置背景顏色- 定義固定寬度和高度
border-radius: 20px：創建圓角效果padding: 20px：內邊距確保內容不緊貼邊緣box-sizing: border-box：使寬度和高度包含padding和border
2. 三角形指示器實現
我們使用::after偽元素創建三角形指示器：
.border::after{content: '';position: absolute;width: 0px;height: 0px;bottom: -19px;left: 50%;translate: -50%;border:1px solid;border-width: 0px 0px 20px 20px;border-color: transparent transparent transparent gray;
}
關鍵點解析：
-
CSS三角形技巧：通過設置邊框寬度為0，然后只顯示一個或兩個邊框，利用邊框相交處的斜角效果創建三角形。
-
定位：
bottom: -19px：將三角形定位在容器下方left: 50%+translate: -50%：水平居中
-
邊框設置：
border-width: 0px 0px 20px 20px：只顯示左下邊框border-color: transparent transparent transparent gray：只讓左邊框顯示顏色（灰色）
效果說明
這個實現創建了一個灰色的圓角矩形氣泡框，底部中央有一個指向下方的三角形指示器。三角形是通過邊框技巧實現的，這是一種常見且高效的CSS技術，避免了使用額外圖片。
可能的改進
- 響應式設計：可以使用相對單位（如
em或rem）代替固定像素值 - 顏色變量：使用CSS變量便于主題更改
- 動畫效果：添加淡入淡出或滑動動畫
- 方向可變：通過添加類名控制三角形出現在不同位置（上、下、左、右）
完整代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS氣泡框示例</title><style>.body{width: 100vh;height: 100vh;}.border{position: relative;background: gray;width: 200px;margin: 200px auto;height: 100px;border-radius: 20px;padding: 20px;box-sizing: border-box;}.border::after{content: '';position: absolute;width: 0px;height: 0px;bottom: -19px;left: 50%;translate: -50%;border:1px solid;border-width: 0px 0px 20px 20px;border-color: transparent transparent transparent gray;}</style>
</head>
<body><div class="border">我是一個氣泡框</div>
</body>
</html>
這種純CSS實現的氣泡框輕量、靈活，是現代網頁設計中常用的技術。通過理解其原理，可以輕松創建各種變體和自定義樣式。
 134. 加油站 (貪心))
)
