學習筆記,僅供參考,有錯必糾
參考自: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是繪制于元素周圍的一條線,位于邊框邊緣的外圍,可起到突出元素的作用:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SO5EzNzEDNhVWOyYGZ1gTOyYzXwMTM1QTMyAzLcZDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
文法:
outline : outline-color ||outline-style || outline-width
去掉輪廓線:
<input type="text" style="outline: 0;"/>
防止拖拽文本域resize
當我們設定一個大文本框時,它是可以被随意拖拽,變大變小的:
實際開發中,我們文本域右下角是不可以拖拽,是以可以做出如下設定:
<textarea style="resize: none;"></textarea>