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; }
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者