appearance属性
- 概念：设置或检索外观按照本地默认样式
- 语法：appearance: none | button | button-bevel
- 补充：所有主流浏览器都不兼容
.none > input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
// 只有checkbox的样式而已，不能像原装checkbox一样选中
// 这里只能输入，因为原来就是个输入框
.checkbox > input {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
text-overflow属性
- 概念：当容器< 'overflow' >为非visible时，定义内联内容溢出其块容器时是否截断
- 语法：text-overflow: clip | ellipsis
- 参数：clip => 将溢出部分裁剪掉，ellipsis => 将溢出部分替换为(...)
// 注意overflow: hidden，溢出隐藏
// 注意white-space: nowrap;意思是强制不换行
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属性
- 概念：复合属性，设置或检索对象外的线条轮廓。
- 语法：outline: <' outline-width '> | <' outline-style '> | <' outline-color '>
- 参数：指定轮廓边框的宽度，样式和颜色
- 复合：outline-width属性，outline-color属性，outline-style属性，outline-offset属性
- 补充：画在border外面，不占据布局空间，不影响元素尺寸；outlines可能是非矩形
div { width: 100px; margin: 100px; padding: 10px; border: 3px solid #333;
outline: 5px solid #f00;
}
// outline-offset属性：设置或检索对象外的线条轮廓偏移容器的值，允许负值
div { width: 100px; margin: 100px; padding: 10px; border: 3px solid #333;
outline: 1px solid #0f0;
outline-offset: 10px;
}
cursor属性
- 概念：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
- 语法：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属性
- 概念：设置或检索对象的缩放比例
- 语法：zoom: normal | <number> | <percentage>
- 参数：
normal：使用对象的实际尺寸
<number>：用浮点数来定义缩放比例，不允许负值
<percentage>：用百分比来定义缩放比例，不允许负值
// 可用于放大镜效果
.test { zoom: normal; }
.test2 { zoom: 5; }
.test3 { zoom: 300%; }
box-sizing属性
- 概念：设置或检索对象的盒模型组成模式
- 语法：box-sizing: content-box | border-box
- 参数：
content-box：padding和border不被包含在定义的width和height之内；
border-box：padding和border被包含在定义的width和height之内；
.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属性
- 概念：设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小
- 语法：resize: none | both | horizontal | vertical
- 参数：
none：不允许用户调整元素大小
both：用户可以调节元素的宽度和高度
horizontal ：用户可以调节元素的宽度
vertical：用户可以调节元素的高度
// resize只能把它拉大，不能拉小
.none { resize: none; }
.both { resize: both; }
.horizontal { resize: horizontal; }
.vertical { resize: vertical; }
user-select属性
- 概念：设置或检索是否允许用户选中文本
- 语法：user-select: none | 其他（不用记）
- 参数：none（不允许选中）
.none { user-select: none; }
