前言

上篇文章主要講述了CSS樣式更改中的多列、元素是否可見、圖片透明度基礎知識，這篇文章我們來介紹下CSS樣式更改中使用者介面和指標型別基礎用法。

1.使用者介面 UserGui

1).重設元素大小 resize

div
{
resize:both
}
none           不調整
both           調整元素的高度和寬度
horizontal     調整元素的寬度
vertical       調整元素的高度

2).規定兩個並排的帶邊框的框 box-sizing

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
content-box  寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
border-box 為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
 

3).對輪廓進行偏移outline-offset

div
{
outline-offset:15px  輪廓與邊框邊緣的距離
}

2.指標型別Cursor

div{
  cursor:auto
}
游標形狀：
default       預設游標（箭頭）
auto        瀏覽器設定的游標。
crosshair           十字線
pointer             一隻手
move                指示某物件可被移動。
e-resize            指示矩形框的邊緣可被向右（東）移動
ne-resize           指示矩形框的邊緣可被向上及向右移動（北/東）
nw-resize           指示矩形框的邊緣可被向上及向左移動（北/西）
n-resize            指示矩形框的邊緣可被向上（北）移動
se-resize           指示矩形框的邊緣可被向下及向右移動（南/東）
sw-resize           指示矩形框的邊緣可被向下及向左移動（南/西）
s-resize            指示矩形框的邊緣可被向下移動（南）
w-resize            指示矩形框的邊緣可被向左移動（西）
text                指示文字
wait                指示程式正忙（通常是一隻表或沙漏）
help                指示可用的幫助（通常是一個問號或一個氣球）
 

參考文件：W3C官方文件（CSS篇）

總結

這篇文章主要介紹了CSS樣式更改篇中的使用者介面和指標型別基礎知識，希望讓大家對CSS樣式更改有個簡單的認識和了解。
想要學習更多，請前往Python爬蟲與資料探勘專用網站：http://pdcfighting.com/