appearance屬性

• 概念：設(shè)置或檢索外觀按照本地默認(rèn)樣式
• 語(yǔ)法：appearance: none | button | button-bevel
• 補(bǔ)充：所有主流瀏覽器都不兼容

.none > input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
// 只有checkbox的樣式而已旁理，不能像原裝checkbox一樣選中
// 這里只能輸入肛循，因?yàn)樵瓉?lái)就是個(gè)輸入框
.checkbox > input {
    -webkit-appearance: checkbox;
       -moz-appearance: checkbox;
            appearance: checkbox;
}

text-overflow屬性

• 概念：當(dāng)容器< 'overflow' >為非visible時(shí)，定義內(nèi)聯(lián)內(nèi)容溢出其塊容器時(shí)是否截?cái)?/li>
• 語(yǔ)法：text-overflow: clip | ellipsis
• 參數(shù)：clip => 將溢出部分裁剪掉峭咒，ellipsis => 將溢出部分替換為(...)

// 注意overflow: hidden，溢出隱藏
// 注意white-space: nowrap;意思是強(qiáng)制不換行
ul > li > p { white-space: nowrap; width: 200px; overflow: hidden; }
ul > li.clip > p {
    text-overflow: clip;
}
ul > li.ellipsis > p {
    text-overflow: ellipsis;
}

outline屬性

• 概念：復(fù)合屬性狱掂，設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓穆刻。
• 語(yǔ)法：outline: <' outline-width '> | <' outline-style '> | <' outline-color '>
• 參數(shù)：指定輪廓邊框的寬度，樣式和顏色
• 復(fù)合：outline-width屬性消约，outline-color屬性肠鲫，outline-style屬性，outline-offset屬性
• 補(bǔ)充：畫(huà)在border外面或粮，不占據(jù)布局空間导饲，不影響元素尺寸；outlines可能是非矩形

div { width: 100px; margin: 100px; padding: 10px; border: 3px solid #333;
    outline: 5px solid #f00;
}

// outline-offset屬性：設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓偏移容器的值氯材，允許負(fù)值
div { width: 100px; margin: 100px; padding: 10px; border: 3px solid #333;
    outline: 1px solid #0f0;
    outline-offset: 10px;
}

cursor屬性

• 概念：設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀
• 語(yǔ)法：cursor: auto | default | context-menu | pointer

.test { width: 400px; border-collapse: collapse; font: 14px/1.5 georgia, arial, serif, sans-serif; }
.test td { padding: 2px 10px; border: 1px solid #ddd; }
.test td:hover { background: #eee; }
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.e-resize { cursor: e-resize; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.w-resize { cursor: w-resize; }
.ew-resize { cursor: ew-resize; }
.ns-resize { cursor: ns-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.all-scroll { cursor: all-scroll; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
.url { cursor: url(skin/cursor.gif), url(skin/cursor.png), url(skin/cursor.jpg), pointer; }

zoom屬性

• 概念：設(shè)置或檢索對(duì)象的縮放比例
• 語(yǔ)法：zoom: normal | <number> | <percentage>
• 參數(shù)：
  normal：使用對(duì)象的實(shí)際尺寸
  <number>：用浮點(diǎn)數(shù)來(lái)定義縮放比例渣锦，不允許負(fù)值
  <percentage>：用百分比來(lái)定義縮放比例，不允許負(fù)值

// 可用于放大鏡效果
.test  { zoom: normal; }
.test2 { zoom: 5;      }
.test3 { zoom: 300%;   }

box-sizing屬性

• 概念：設(shè)置或檢索對(duì)象的盒模型組成模式
• 語(yǔ)法：box-sizing: content-box | border-box
• 參數(shù)：
  content-box：padding和border不被包含在定義的width和height之內(nèi)氢哮；
  border-box：padding和border被包含在定義的width和height之內(nèi)袋毙；

.test {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}
.test2 {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

resize屬性

• 概念：設(shè)置或檢索對(duì)象的區(qū)域是否允許用戶(hù)縮放，調(diào)節(jié)元素尺寸大小
• 語(yǔ)法：resize: none | both | horizontal | vertical
• 參數(shù)：
  none：不允許用戶(hù)調(diào)整元素大小
  both：用戶(hù)可以調(diào)節(jié)元素的寬度和高度
  horizontal ：用戶(hù)可以調(diào)節(jié)元素的寬度
  vertical：用戶(hù)可以調(diào)節(jié)元素的高度

// resize只能把它拉大冗尤，不能拉小
.none { resize: none; }
.both { resize: both; }
.horizontal { resize: horizontal; }
.vertical { resize: vertical; }

user-select屬性

• 概念：設(shè)置或檢索是否允許用戶(hù)選中文本
• 語(yǔ)法：user-select: none | 其他（不用記）
• 參數(shù)：none（不允許選中）

.none { user-select: none; }