13 種可能對前端有用的 CSS 技術

作者：佚名 2023-11-02 12:47:00

開發前端

修改輸入占位符樣式、多行文本溢出、隱藏滾動條、修改光標顏色、水平和垂直居中。多么熟悉的場景啊！前端開發人員幾乎每天都會與它們打交道。本文收集了13個CSS技巧，我們一起來回顧一下。

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 選擇器

除了最后一個元素之外的所有元素都需要一些樣式，而使用選擇器實現這一點并不容易。

例如，要實現列表，最后一個元素不需要加下劃線，如下所示：

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;
   /* Key style */
   caret-color: #ffd476;
}


.caret-color::-webkit-input-placeholder {
   color: #4f4c5f;
   font-size: 14px;
}

6.使用flex布局智能地將元素固定到底部

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

<div class="container">
   <div class="main">Content here</div>
   <div class="footer">Button</div>
</div>

CSS代碼如下：

.container {
   height: 100vh;
   /* Key style */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}


.main {
   /* Key style */
   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;
}
/* Key style */
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;
   /* Basic style */
   border: solid 10px transparent;
}
/* downward triangle */
.triangle.bottom {
   border-top-color: #0097a7;
}
/* Upward triangle */
.triangle.top {
   border-bottom-color: #b2ebf2;
}
/* Leftward triangle */
.triangle.left {
   border-right-color: #00bcd4;
}
/* Right triangle */
.triangle.right {
   border-left-color: #009688;
}

11.自定義選定的文本樣式

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

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

12. 不允許選擇文本

使用用戶選擇的樣式：none；

13. 使用filter:grayscale(1)將頁面置于灰度模式

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

body{
  filter: grayscale(1);
}

總結

以上就是我今天想與你分享的13個關于CSS的技巧，希望這些技巧對你有用。

責任編輯：華軒來源： web前端開發

前端 CSS