13 种可能对前端有用的 CSS 技术-51CTO.COM

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