修改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技巧，希望这些内容对你有所帮助。

最后，感谢你的阅读，祝编程愉快！