2. CSS用戶界面樣式

• 所謂的界面樣式， 就是更改一些用戶操作樣式，以便提高更好的用戶體驗。
  • 更改用戶的鼠標樣式 (滾動條因為兼容性非常差，我們不研究)
  • 表單輪廓等。
  • 防止表單域拖拽

2.1 鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

屬性值描述

default	小白 默認
pointer	小手
move	移動
text	文本
not-allowed	禁止

鼠標放我身上查看效果哦：

<ul><li style="cursor:default">我是小白</li><li style="cursor:pointer">我是小手</li><li style="cursor:move">我是移動</li><li style="cursor:text">我是文本</li><li style="cursor:not-allowed">我是文本</li> </ul>

2.2 輪廓線 outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

但是我們都不關心可以設置多少，我們平時都是去掉的。 li

最直接的寫法是 ： outline: 0; 或者 outline: none;

<input type="text" style="outline: 0;"/>

2.3 防止拖拽文本域resize

實際開發中，我們文本域右下角是不可以拖拽：

<textarea style="resize: none;"></textarea>

2.4 用戶界面樣式總結

屬性用途用途

鼠標樣式	更改鼠標樣式cursor	樣式很多，重點記住 pointer
輪廓線	表單默認outline	outline 輪廓線，我們一般直接去掉，border是邊框，我們會經常用
防止拖拽	主要針對文本域resize	防止用戶隨意拖拽文本域，造成頁面布局混亂，我們resize:none

總結

以上是生活随笔為你收集整理的八、pink老师的学习笔记—— CSS用户界面样式（鼠标样式、轮廓线、防止拖拽文本域）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。