一、滑鼠樣式（cursor）
文法：
li {
cursor: pointer;
} 設定或檢索在對象上移動的滑鼠指針采用何種系統預定義的光标形狀。
| 屬性值 | 描述 |
| default | 小白箭頭 預設 |
| pointer | 小手 |
| move | 移動 |
| text | 文本 |
| not-allowed | 禁止 |
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<listyle="cursor: default;">小白箭頭</li>
<listyle="cursor: pointer;">小手</li>
<listyle="cursor: move;">移動</li>
<listyle="cursor: text;">文本</li>
<listyle="cursor: not-allowed;">禁止</li>
</ul>
</body>
</html> 二、輪廓線（outline）
當表單獲得焦點是會出現藍色的邊框：
這個可以通過outline屬性設定為0取消掉：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text"style="outline: 0;">
</body>
</html> 代碼運作效果：
三、防止拖拽文本域textarea
将resize屬性設定為none即可：
textarea {
resize: none;
} 注意：textarea标簽中間不加空格或換行，如下：
<textarea name="" id="" cols="30" rows="10"></textarea> 如果加了空格或換行，文本域中的文字不會貼邊顯示，會産生有内邊距的效果：
<textarea name="" id="" cols="30" rows="10"> </textarea>
or
<textarea name="" id="" cols="30" rows="10">
</textarea> 四、vertical-align屬性應用
CSS的
vertical-align
屬性使用場景：經常用于設定圖檔或者表單（行内塊元素）和文字垂直對齊。
官方解釋：用于設定一個元素的垂直對齊方式，但是它隻針對于行内元素或者行内塊元素有效。
文法：
vertical-align: | 值 | 描述 |
| baseline | 預設，元素放置在父元素的基線上 |
| top | 把元素的頂端與行中最高元素的頂端對齊 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊 |
- 圖檔、表單都術語行内塊元素，預設的
vertical-align
- 可以給圖檔、表單這些行内塊元素的
vertical-align
middle
bug：圖檔底側會有一個空白縫隙，原因是行内塊元素回個文字的基線對齊。
主要解決方法有兩種：
1、給圖檔添加
vertical-align: middle | top | bottm;
等（提倡使用）；
2、把圖檔轉換為塊級元素
display: block;
，因為隻有行内元素或行内塊元素采用基線對齊的問題，塊級元素沒有
vertical-align
屬性;
五、溢出的文字省略号顯示
1、單行文本溢出顯示省略号–必須滿足三個條件
/*先強制一行内顯示文本*/
white-space: nowrap; (預設 normal 自動換行)
/*超出的部分隐藏*/
overflow: hidden;
/*文字用省略号代替超出的部分*/
text-overflow: ellipsis; 代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.box1 {
width: 100px;
height: 20px;
background-color: pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 200px auto;
}</style>
</head>
<body>
<div class="box1">
永和九年，歲在癸醜。暮春之初，會與會稽山陰之蘭亭。
</div>
</body>
</html> 代碼運作效果：
2、多行文本溢出顯示省略号
多行文本溢出顯示省略号，有較大的相容性問題，适合于webkit浏覽器或移動端（移動端大部分是webkit核心）
overflow: hidden;
text-overflow: ellipsis;
/*彈性伸縮盒子模型顯示*/
display: -webkit-box;
/*限制在一個塊元素顯示的文本的行數*/
-webkit-line-clamp: 2;
/*設定或檢索伸縮盒對象的子元素的排列方式*/
-webkit-box-orient: vertical; 代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.box1 {
width: 100px;
height: 40px;
background-color: pink;
margin: 200px auto;
overflow: hidden;
text-overflow: ellipsis;
/*彈性伸縮盒子模型顯示*/
display: -webkit-box;
/*限制在一個塊元素顯示的文本的行數*/
-webkit-line-clamp: 2;
/*設定或檢索伸縮盒對象的子元素的排列方式*/
-webkit-box-orient: vertical;
}</style>
</head>
<body>
<div class="box1">
永和九年，歲在癸醜。暮春之初，會與會稽山陰之蘭亭。
</div>
</body>
</html>