# CSS中小寫變大寫的代碼怎么寫
在網頁設計中，文本大小寫轉換是常見的樣式需求。CSS提供了多種屬性可以輕松實現小寫字母到大寫字母的轉換，同時保持HTML源碼的原始內容不變。本文將詳細介紹4種實現方式及其應用場景。
## 一、text-transform 屬性（最常用）
`text-transform` 是CSS中專用于控制文本大小寫的屬性，通過簡單聲明即可實現轉換：
```css
.uppercase-text {
text-transform: uppercase;
}
效果示例：
hello world → HELLO WORLD
é→é）如需更專業的排版效果，可使用小型大寫字母：
.small-caps {
font-variant: small-caps;
}
效果對比：
常規大寫：HELLO
小型大寫：?????（保持小寫字母比例但顯示為大寫形式）
當需要動態控制時，可結合CSS類與JS：
document.querySelector('.dynamic-text').classList.add('uppercase-text');
對特定內容進行轉換：
.button::after {
content: "click me";
text-transform: uppercase;
}
<!DOCTYPE html>
<html>
<head>
<style>
.method1 { text-transform: uppercase; }
.method2 { font-variant: small-caps; }
</style>
</head>
<body>
<p class="method1">This text will be uppercase</p>
<p class="method2">This uses small-caps</p>
</body>
</html>
所有現代瀏覽器均支持： - Chrome 1+ - Firefox 1+ - Safari 1+ - Edge 12+ - Opera 7+
結合過渡動畫：
.hover-effect {
text-transform: lowercase;
transition: text-transform 0.3s;
}
.hover-effect:hover {
text-transform: uppercase;
}
多語言混合處理：
[lang="en"] { text-transform: uppercase; }
[lang="zh"] { text-transform: none; }
通過合理運用這些技術，可以輕松實現專業的文本大小寫控制效果，同時保持代碼的簡潔性和可維護性。 “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
