text-transform 文本大小写转换、input checkbok 大小设置、letter-spacing 设置字符间距

古城微笑少年丶 2022-05-14 17:55 78阅读 0赞

**目录**

text-transform 文本大小写转换

input checkbok 大小设置

letter-spacing 设置字符间距

--------------------

# text-transform 文本大小写转换 #

1、版本：CSS1/3 ，检索或设置对象中的文本的大小写。

2、语法：text-transform：none | capitalize | uppercase | lowercase | full-width

3、默认值：none、适用于：所有元素、继承性：有、动画性：否、none： 无转换

4、capitalize： 将每个单词的第一个字母转换成大写

5、uppercase： 将每个单词转换成大写

6、lowercase： 将每个单词转换成小写

7、full-width： 将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）

![20191217170705276.gif][]

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8"/>
    <title>visibility 样式</title>
    <style>
    </style>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#up").click(function () {
                $("div").css("text-transform","uppercase");
            });
            $("#low").click(function () {
                $("div").css("text-transform","lowercase");
            });
            $("#cap").click(function () {
                $("div").css("text-transform","capitalize");
            });
        });
    </script>
    </head>
    <body>
    <div>
    how do you do,HOW ARE YOU. where is 万里长城 ? Nice.
    </div>
    <br>
    <button id="up">全部转为大写</button>
    <button id="low">全部转为小写</button>
    <button id="cap">首字母转大写</button>
    </body>
    </html>

# input checkbok 大小设置 #

![70][]

/*调整所有复选框的大小，不用带单位，后面的 transform 是为了兼容浏览器兼容
    zomm：针对chrome
    -moz-transform：针对firefox
    -ms-transform:针对IE
    -webkit-transform：针对safair
    -o-transform:针对Opera */
    input[type='checkbox'] {
        zoom: 1.3;
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -o-transform: scale(1.3);
    }

# letter-spacing 设置字符间距 #

1、[letter-spacing ][letter-spacing]属性增加或减少字符间的空白（字符间距），允许使用负值，这会让字母之间挤得更紧。

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>normal</td> 
   <td>默认。规定字符间没有额外的空间。</td> 
  </tr> 
  <tr> 
   <td><em>length</em></td> 
   <td>定义字符间的固定空间（允许使用负值）。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 letter-spacing 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

2、在线演示源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/test/resources/html/neonLights.html][https_github.com_wangmaoxiong_red-door_blob_master_src_test_resources_html_neonLights.html]

![20210505173630635.gif][]

[20191217170705276.gif]: /images/20220503/76826fb1da7c48e8ac3df003c315b923.png
[70]: /images/20220503/1351796a90934ed0bfc2cb377cab0e14.png
[letter-spacing]: https://www.w3school.com.cn/cssref/pr_text_letter-spacing.asp
[https_github.com_wangmaoxiong_red-door_blob_master_src_test_resources_html_neonLights.html]: https://github.com/wangmaoxiong/red-door/blob/master/src/test/resources/html/neonLights.html
[20210505173630635.gif]: /images/20220503/2a651b9e8fe840a3943bd8e01425e9ea.png