• 首页
• 笔记
• 前端笔记
• 正文

13 种可能对前端有用的 CSS 技术

云霄万里

1个月前发布

70

修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景啊！前端开发人员几乎每天都会与它们打交道。本文收集了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.修改输入框占位符样式

这是表单输入框的占位符属性。修改默认样式的方法如下：

input::-webkit-input-placeholder {  color: #babbc1;  font-size: 12px;}

4. 使用 :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;   /* Key style */   caret-color: #ffd476;}
.caret-color::-webkit-input-placeholder {   color: #4f4c5f;   font-size: 14px;}

6.使用flex布局智能地将元素固定到底部

当内容不够时，按钮应该位于页面底部。当内容足够多时，按钮应该跟随内容。当你遇到类似的问题时，可以使用flex智能布局！

<div class="container">   <div class="main">Content here

<div class="footer">Button

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.自定义选定的文本样式

文本选择的颜色和样式可以通过styles自定义。关键样式如下：

::selection {  color: #ffffff;  background-color: #ff4c9f;}

12. 不允许选择文本

使用用户选择的样式：none；

13.使用filter:grayscale(1)将页面置于灰度模式

一行代码会将页面置于灰色模式。

body{  filter: grayscale(1);}

总结