13 個實用CSS技巧，幫助你提升前端開發效率！

這篇文章整理分享13 個前端可能用得上的 CSS技巧，包括修改輸入佔位符樣式、多行文字溢位、隱藏捲軸、修改遊標顏色等，希望對大家有幫助！

修改輸入佔位符樣式、多行文字溢位、隱藏捲軸、修改遊標顏色、水平和垂直居中。多麼熟悉的場景！前端開發者幾乎每天都會和它們打交道，本文收集 13 個CSS技巧，一起來溫故一下。

1. 解決圖片5px間距問題

是否經常遇到圖片底部多出 5px 間距的問題？不急，有4種方法可以解決。 【推薦學習：css影片教學】

• 解決方案2：將img 的樣式增加display:block
• 解決方案3：將img 的樣式增加vertical-align:bottom
• #解決方案4：將父元素的樣式增加line-height:5px
#2. 如何讓元素高度與視窗相同

在現在前端中，CSS有一個單位是vh

，將元素高度樣式設定為

height:100vh3. 修改輸入框placeholder 樣式

這個是表單輸入框佔位符屬性，如何來修改預設樣式，如下：

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

4. 使用

:not

選擇器除了最後一個元素之外的所有元素都需要一些樣式，使用not

選擇器可以非常容易實現。

例如實作一個列表，最後一個元素不需要底線，如下：

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

#5. 使用

caret-color

修改遊標顏色 #有時需要修改遊標的顏色。現在是插入符號顏色顯示時間。

.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">这里为内容</div>
  <div class="footer">按钮</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"

末尾的箭頭##預設情況下，input 類型為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. 畫三角形

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* 基础样式 */
  border: solid 10px transparent;
}
/* 向下三角形 */
.triangle.bottom {
  border-top-color: #0097a7;
}
/* 向上三角形 */
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/* 向左三角形 */
.triangle.left {
  border-right-color: #00bcd4;
}
/* 向右三角形 */
.triangle.right {
  border-left-color: #009688;
}

#11. 自訂選取的文字樣式

可以透過樣式自訂文字選擇的顏色和樣式，關鍵樣式如下：

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

#12. 不允許選擇的文字

使用樣式user-select: none;

13 使用filter:grayscale(1)

讓頁面處於灰色模式

一行程式碼將使頁面處於灰色模式。

body{
  filter: grayscale(1);
}

（學習影片分享：

web前端

）

以上是13 個實用CSS技巧，幫助你提升前端開發效率！的詳細內容。更多資訊請關注PHP中文網其他相關文章！