12 個實用的高級前端 CSS 技巧
input::-webkit-input-placeholder {color: #babbc1;font-size: 12px;}
4. 使用 :not 選擇器
除了最后一個元素之外的所有元素都需要一些樣式，這可以使用 not 選擇器輕松實現(xiàn)。
例如，要實現(xiàn)列表，最后一個元素不需要加下劃線，如下所示：
li:not(:last-child) {border-bottom: 1px solid #ebedf0;}
5.使用caret-color修改光標顏色
有時需要修改光標的顏色。現(xiàn)在是插入符號顏色顯示時間。
.caret-color {width: 300px;padding: 10px;margin-top: 20px;border-radius: 10px;border: solid 1px #ffd476;box-sizing: border-box;background-color: transparent;outline: none;color: #ffd476;font-size: 14px;caret-color: #ffd476;}.caret-color::-webkit-input-placeholder {color: #4f4c5f;font-size: 14px;}
6.使用flex布局智能地將元素固定到底部
當內(nèi)容不足時，按鈕應(yīng)位于頁面底部。當內(nèi)容足夠多時，按鈕應(yīng)該跟隨內(nèi)容。當你遇到類似的問題時，可以使用flex來實現(xiàn)智能布局！
<div class="container"><div class="main">main</div><div class="footer">button</div></div>
CSS代碼如下：
.container {height: 100vh;display: flex;flex-direction: column;justify-content: space-between;}.main {flex: 1;background-image: linear-gradient(45deg,#ff9a9e 0%,#fad0c4 99%,#fad0c4 100%);display: flex;align-items: center;justify-content: center;color: #fff;}.footer {padding: 15px 0;text-align: center;color: #ff9a9e;font-size: 14px;}
7.去掉type=”number”末尾的箭頭
默認情況下，type="number"的輸入類型末尾會出現(xiàn)一個小箭頭，但有時需要將其去掉，可以使用以下樣式：
input {width: 300px;padding: 10px;margin-top: 20px;border-radius: 10px;border: solid 1px #ffd476;box-sizing: border-box;background-color: transparent;outline: none;color: #ffd476;font-size: 14px;caret-color: #ffd476;display: block;}input::-webkit-input-placeholder {color: #4f4c5f;font-size: 14px;}/* 關(guān)鍵樣式 */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}
8.使用outline:none去掉輸入狀態(tài)行
當輸入框被選中時，默認會有一條藍色狀態(tài)線，可以使用outline:none將其刪除。
9.解決iOS滾動條卡住的問題
在蘋果手機上，滾動時元素經(jīng)常會卡住。此時只有一行CSS會支持彈性滾動。
body,html{-webkit-overflow-scrolling: touch;}
10.自定義選定的文本樣式
您可以通過styles自定義選擇文本的顏色和樣式。關(guān)鍵樣式如下：
::selection {color: #ffffff;background-color: #ff4c9f;}
11. 文本不允許被選擇
使用用戶選擇的樣式：none；
12.使用filter:grayscale(1)使頁面處于灰度模式
一行代碼會將頁面置于灰色模式。
body{filter: grayscale(1);}
最后
感謝您的閱讀，如果您覺得今天內(nèi)容對您有點幫助的話，請記得點贊我關(guān)注我，最后，祝編程愉快！
學(xué)習更多技能
請點擊下方公眾號
評論
圖片
表情