13 種可能對前端有用的 CSS 技術
作者：佚名
修改input占位符樣式，多行文本溢出，隱藏滾動條，修改光標顏色，水平垂直居中，多么熟悉的場景啊！前端開發者幾乎每天都要處理，本文收集了13個CSS技巧，一起來學習一下吧。
修改input占位符樣式，多行文本溢出，隱藏滾動條，修改光標顏色，水平垂直居中，多么熟悉的場景啊！前端開發者幾乎每天都要處理，本文收集了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.修改輸入框占位符樣式
這是表單輸入框的placeholder屬性。修改默認樣式的方法如下：
input::-webkit-input-placeholder {
color: #babbc1;
font-size: 12px;
}4. 使用 :not 選擇器
除了最后一個元素之外，其他元素都需要一些樣式，而使用選擇器則很容易實現。
例如，要實現列表，最后一個元素不需要加下劃線，如下所示：
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}5. 使用 caret-color 修改光標顏色
有時需要修改光標的顏色。這是 caret 顏色時間。
.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. 使用彈性布局智能固定元素到底部
內容不夠時，按鈕應該放在頁面底部。內容足夠時，按鈕應該跟隨內容。當你遇到類似的問題時，你可以使用彈性智能布局！
<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. 自定義選中文本樣式
可以通過樣式自定義選中文本的顏色和樣式。主要樣式如下：
::selection {
color: #ffffff;
background-color: #ff4c9f;
}12. 不允許選擇文本
使用樣式 user-select: none;
13 使用 filter:grayscale(1) 將頁面置于灰色模式
一行代碼即可將頁面置于灰色模式。
body{
filter: grayscale(1);
}總結
以上就是我想與你分享的13個CSS技巧，希望這些內容對你有所幫助。
責任編輯：華軒
來源：
web前端開發
