天天看點

CSS基礎(part16)--CSS使用者界面樣式

學習筆記,僅供參考,有錯必糾

參考自:pink老師課堂筆記

文章目錄

  • ​​CSS使用者界面樣式​​
  • ​​滑鼠樣式cursor​​
  • ​​輪廓線outline​​
  • ​​防止拖拽文本域resize​​

CSS使用者界面樣式

滑鼠樣式cursor

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

屬性值 描述
default 小白 預設
pointer 小手
move 移動
text 文本
not-allowed 禁止

HTML代碼:

<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>      

輪廓線outline

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

CSS基礎(part16)--CSS使用者界面樣式

文法:

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

去掉輪廓線:

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

防止拖拽文本域resize

當我們設定一個大文本框時,它是可以被随意拖拽,變大變小的:

CSS基礎(part16)--CSS使用者界面樣式

實際開發中,我們文本域右下角是不可以拖拽,是以可以做出如下設定:

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