直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-transform</title>
<style>
.text-transform-none{
text-transform: none
}
.text-transform-capitalize{
text-transform: capitalize
}
.text-transform-uppercase{
text-transform: uppercase
}
.text-transform-lowercase{
text-transform: lowercase
}
.text-transform-inherit{
text-transform: inherit
}
</style>
</head>
<body>
<div>默认。定义带有小写字母和大写字母的标准的文本。i am a mAn</div>
<!-- capitalize 文本中的每个单词以大写字母开头。 只转首字母 其他字母是不是大写不关心 用户自己决定 -->
<div class="text-transform-capitalize">i am a mAn</div>
<div class="text-transform-uppercase">i Am a mAn</div>
<div class="text-transform-lowercase">i Am A mAn</div>
<div class="text-transform-lowercase">
<div class="text-transform-inherit">i Am A mAn</div>
</div>
</body>
</html>
效果