以前寫樣式時(shí)，有幾個(gè)比較常用的屬性經(jīng)常忘記，爛筆頭寫下來方便記憶與查詢俘陷。
瀏覽器滾動(dòng)條樣式：
::-webkit-scrollbar { /*滾動(dòng)條整體樣式*/
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track-piece { /*滾動(dòng)條里面軌道*/
background-color: #f8f8f8;
}
::-webkit-scrollbar-thumb { /*滾動(dòng)條里面小方塊*/
background-color: #dddddd;
background-clip: padding-box;
min-height: 28px;
border-radius: 5px;
}
/* ::-webkit-scrollbar-thumb:horizontal {
background-color: #ddd;
} */
::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
}
文本溢出隱藏：
.text {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
文本部分拒絕選中：
.text {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
文字方向：
.text {
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;
/* 水平方向自上而下 | 垂直方向自右而左 | 垂直方向自左而右 | 內(nèi)容垂直方向從上到下排列 | 內(nèi)容垂直方向從下到上排列*/
}
背景顏色漸變：
.text {
/* 線性漸變 */
background-image: linear-gradient(#e66465, #9198e5); /* 從上到下 */
background-image: linear-gradient(to right, red , yellow); /* 從左到右 */
background-image: linear-gradient(to bottom right, red, yellow); /* 從左上角到右下角 */
/* 徑向漸變 */
background-image: radial-gradient(red, yellow, green);
}
