一、什麼是CSS Transform
CSS transform可以改變元素的形狀、位置和大小等。它包括旋轉（rotate）、縮放（scale）、移動（translate）和扭曲（skew）等多種功能。
其中，rotate和scale等屬性，我們可能更容易理解和掌握。但是對於transform中的text-transform屬性，即字母大小寫的轉換，往往會被忽略。
二、text-transform屬性簡介
text-transform屬性可以控制文本的大小寫形式。
selector {
text-transform: uppercase|lowercase|capitalize|none;
}
其中，各屬性含義如下：
- uppercase：全部字母轉為大寫
- lowercase：全部字母轉為小寫
- capitalize：將單詞的首字母大寫
- none：保持原樣
三、將uppercase轉換為Capitalize
當我們需要將所有字母轉換為大寫時，可以直接使用text-transform:uppercase。但是當我們想要將所有單詞的首字母大寫時，text-transform屬性也可以完成。
selector {
text-transform: none; /* 首先取消原有的轉換效果 */
text-transform: capitalize;
}
使用text-transform屬性將每個單詞的首字母轉換為大寫，當然這涉及到詞的定義，中間有標點符號或者連字符會影響結果。
四、小結
CSS transform中的text-transform屬性可以幫助我們快速地將文本的大小寫形式轉換為我們需要的格式。其中capitalize屬性可以將每個單詞的首字母轉換為大寫，尤其適合於標題和重要內容的展示等。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/271627.html
微信掃一掃 
支付寶掃一掃 