此文來自微信公眾號【CC前端手記】哦~
有一些總是要用但總記不住，每次都要百度的css樣式？我有，相信你也有。來看看，是不是這些：
設置input中的字體樣式
（1）設置的字體樣式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
color: red;
}
input:-moz-placeholder { /* Firefox 18- */
color: red;
}的意思是占位符，它是html5中input的屬性。這個屬性很好用，但它的樣式存在瀏覽器兼容問題，所以我們需要根據不同瀏覽器內核來分別設置。格式如：input::-瀏覽器內核標識-input-
（2）取消input的邊框
border: none;
outline: none;是元素的邊框，(輪廓)是繪制在元素周圍的一條線，可以突出元素。瀏覽器默認給input元素設置了這兩個屬性。當我們需要扁平化Input時，就可以將和去掉。
2. 文字超出隱藏并顯示...
大家要注意這幾個屬性：
/*單行 */
.txt{
width:200rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行 */
.txt{
word-break: break-all;
display: -webkit-box; // 自適應布局
-webkit-line-clamp: 2; // 文本行數最多2行
-webkit-box-orient: vertical; // 子元素垂直排列
overflow: hidden; // 超出部分隱藏
}3. 隱藏滾動條或更改滾動條樣式
注意這幾個名詞，你就可以自由設置滾動條樣式了：
/*定義滾動條寬高及背景，寬高分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar {
width: 10px; /*對垂直流動條有效*/
height: 10px; /*對水平流動條有效*/
}
/*定義滾動條的軌道顏色、內陰影及圓角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
background-color: grey;
border-radius: 3px;
}
/*定義滑塊顏色、內陰影及圓角*/
::-webkit-scrollbar-thumb{
border-radius: 7px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
background-color: #E8E8E8;
}
/*定義兩端按鈕的樣式*/
::-webkit-scrollbar-button {
background-color: blue;
}
/*定義右下角匯合處的樣式*/
::-webkit-scrollbar-corner {
background: brown;
}
4. 控制div內的元素自動換行
換行問題常用這幾個屬性：
word-wrap: break-word; // 允許長單詞換行到下一行
word-break：break-all; // 在哪兒換行都行，在單詞內換行都行5. 純CSS實現三角形
三角形在業務中也是非常常用的場景，一小段代碼告別切圖：
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}6. 絕對定位元素居中（水平和垂直方向）
#demo {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: green;
}7. 表格邊框合并
表格邊框合并使用的主要屬性是。譯為崩潰倒塌。table和td本來有各自的邊框，table的邊框倒塌了，就只剩下td的了哦，也就是邊框合并了唄~
table,tr,td{
border: 1px solid #666;
}
table{
border-collapse: collapse;
}就是這些，對不對？哪有什么記不住，就是我們懶得花時間讓自己把技術吃透。挑出來，挨個屬性去查閱文檔，每個值拿出來去嘗試。每個都弄懂了，我不信你下次還需要百度。
Socss 中設置滾動條顏色，學技術不怕慢，就怕那啥 ~ 你懂的
關注公粽號【CC前端手記】css 中設置滾動條顏色，學編程不脫發哦~