轉載說明：原創不易，未經授權，謝絕任何形式的轉載

1、解決圖檔5px間距問題

您是否經常遇到圖檔底部多出5px空間的問題？别擔心，有4種方法可以解決。

方案一：設定其父元素的font-size:0px
方案二：在 img 的樣式中添加display:block
方案三：在 img 的樣式中添加vertical-align:bottom
方案四：将父元素的樣式增加為line-height:5px

2、如何讓元素的高度與視窗相同

目前前端中CSS的機關為vh，元素高度樣式設定為height:100vh

3、修改輸入框占位符樣式

input::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

4. 使用 :not 選擇器

除了最後一個元素之外的所有元素都需要一些樣式，這可以使用 not 選擇器輕松實作。例如，要實作清單，最後一個元素不需要加下劃線，如下所示：

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

5、修改輸入框placeholder的樣式

這段CSS代碼的作用是為一個輸入框設定了邊框、圓角、尺寸和光标顔色等樣式，同時定義了輸入框的占位文本樣式。輸入框内的文本将顯示為淺黃色，占位文本将顯示為深灰色。

.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布局智能地将元素固定到底部

當内容不足時，按鈕應位于頁面底部。當内容足夠多時，按鈕應該跟随内容。當你遇到類似的問題時，可以使用flex來實作智能布局！

<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"的輸入類型末尾會出現一個小箭頭，但有時需要将其去掉，可以使用以下樣式：

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;
}
/* 關鍵樣式 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8、使用outline:none去掉輸入狀态行

當輸入框被選中時，預設會有一條藍色狀态線，可以使用outline:none将其删除。

9、解決iOS滾動條卡住的問題

在蘋果手機上，滾動時元素經常會卡住。此時隻有一行CSS會支援彈性滾動。

body,html{
  -webkit-overflow-scrolling: touch;
}

10、自定義標明的文本樣式

您可以通過styles自定義選擇文本的顔色和樣式。關鍵樣式如下：

::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

11、文本不允許被選擇

使用以下樣式進行實作：

user-select: none;

12、使用filter:grayscale(1)使頁面處于灰階模式

一行代碼會将頁面置于灰色模式。

body{
  filter: grayscale(1);
}

結束

由于文章内容篇幅有限，今天的内容就分享到這裡，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請别忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想擷取更多前端技術的知識，歡迎關注我，您的支援将是我分享最大的動力。我會持續輸出更多内容，敬請期待。

分享12個實用的 CSS 進階小技巧