修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景！前端开发者几乎每天都会和它们打交道，本文收集 13 个 CSS 技巧，一起来来温故一下吧。
是否经常遇到图片底部多出 5px 间距的问题？不着急，有 4 种方法可以解决。
解决方案 1：将其父元素的
font-size:0px解决方案 2：将 img 的样式增加
display:block解决方案 3：将 img 的样式增加
vertical-align:bottom解决方案 4：将父元素的样式增加
line-height:5px
2. 如何让元素高度与窗口相同
在现在前端中，CSS 有一个单位是 vh，将元素高度样式设置为 height:100vh
3. 修改输入框 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);}
复制代码
本文来自投稿，不代表本站立场，如若转载，请注明出处：https://typecho.firshare.cn/archives/1453.html
免责声明：文章内容不代表本站立场，本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺，仅供读者参考，文章版权归原作者所有。避免网络欺诈，本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易，则需自行承担后果。本站在注明来源的前提下推荐原文至此，仅作为优良公众、公开信息分享阅读，不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益（内容、图片等），请及时联系本站，我们会及时删除处理。
