12 个实用的高级前端 CSS 技巧
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">main</div><div class="footer">button</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”末尾的箭头
默认情况下，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.自定义选定的文本样式
您可以通过styles自定义选择文本的颜色和样式。关键样式如下：
::selection {color: #ffffff;background-color: #ff4c9f;}
11. 文本不允许被选择
使用用户选择的样式：none；
12.使用filter:grayscale(1)使页面处于灰度模式
一行代码会将页面置于灰色模式。
body{filter: grayscale(1);}
最后
感谢您的阅读，如果您觉得今天内容对您有点帮助的话，请记得点赞我关注我，最后，祝编程愉快！
学习更多技能
请点击下方公众号
评论