CSS(Cascading Style Sheets) 是前端开发中必不可少的一部分，它可以使HTML文档更加美观、可读性更高、并且更具有交互性。本文将分享12个 CSS 实用小技巧，让开发者们能够更快捷地实现常见的 CSS 样式。
1. 使用 after 伪元素代替标记
在编写 HTML中常常需要添加一些标记，如箭头、蒙版、图表等。这时候，我们可以使用 after 伪元素来进行代替标记。
.arrow {
position: relative;
}
.arrow::after {
display: block;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #000;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -5px;
}
我们可以这样使用:
<p>这是一段有箭头的文本<span class="arrow"></span></p>
解析：
箭头使用 after 伪元素来实现，在 CSS 中先将容器设置为相对定位，然后在 after 伪元素中将容器设置为绝对定位，并通过 right 属性将箭头从容器中向外侧移动，最后通过 transform 属性使箭头居中对齐。
2. 使用文本溢出省略号
文本太长时，我们通常希望截断文本并在结尾加上省略号，这时候我们可以使用 text-overflow 属性。
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
将此样式应用到我们想要截断的文本容器中即可：
<p class="ellipsis">这是一段过长的文本，应该被省略掉以保持页面美观度！</p>
解析：
text-overflow 的参数可以为 clip、ellipsis 或 string，其中 clip 表示截断文本但不添加省略号。 ellipsis 表示在结尾处添加省略号，而字符串参数则表示在结尾处添加自定义的字符串。
3. 显示/隐藏滚动条
有时我们需要控制容器内的滚动条是否可见，这时候我们可以使用 ::-webkit-scrollbar 伪元素。
.container::-webkit-scrollbar {
width: 0.5em;
}
.container::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.container:hover::-webkit-scrollbar {
width: 0.5em;
}
.container:hover::-webkit-scrollbar-thumb {
background: #333;
}
将此样式应用到容器中即可:
<div class="container">
// 容器内部内容
</div>
解析：
使用 ::-webkit-scrollbar 伪元素可以直接控制滚动条的样式。在上述代码中，width 属性控制滚动条宽度，background 控制滚动条背景颜色，而 border-radius 属性设置滚动条的边角圆角。
4. 实现等高容器
开发中，我们常常需要实现容器等高，在不同容器中浮动元素不会出现高度不同的问题，这时候我们可以使用 display 属性中的 table 属性和 table-cell 属性。
.container {
display: table;
width: 100%;
}
.box {
display: table-cell;
height: 100%;
}
将此样式应用到容器中即可:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
解析：
在 CSS 中使用 display:table 属性可将一个元素类型转换为表格元素，table-cell 属性表示表格单元格，使得元素以表格的形式排列。这样我们可以在同级容器内实现等高效果。
5. 定位绝对居中
有时候我们需要将元素垂直水平居中，这时候我们可以使用定位偏移和 margin 属性。
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
将此样式应用到元素中即可:
<div class="center">我是一个垂直水平居中的元素</div>
解析：
position:absolute 属性可以使元素脱离文本流并在父元素中进行绝对定位，top 和 left 属性则决定了元素相对于父元素的位置。最后，通过 translate 属性使元素垂直水平居中。
6. 实现等宽布局
有时候我们需要将多个元素等分容器宽度，可以使用 CSS 的 calc() 函数。
.container {
display: flex;
}
.box {
width: calc((100% / 3) - 10px);
}
将此样式应用到容器中即可:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
解析：
在上述代码中，100% 表示容器的整个宽度，/3 表示将容器宽度等分为三个部分，-10px 表示元素之间的间距，最后通过 calc() 函数计算出元素的精准宽度。
7. 使用 shadows 制作旋转效果
使用 box-shadow 属性可以制作出旋转效果。
.box {
box-shadow: 60px 60px 0 0 #f00, 120px 120px 0 0 #0f0, 180px 180px 0 0 #00f;
transition: box-shadow 0.3s ease-in-out;
}
.box:hover {
box-shadow: 60px 60px 0 0 #00f, 120px 120px 0 0 #f00, 180px 180px 0 0 #0f0;
}
将此样式应用到元素中即可，其实悬停的时候就是更改 box-shadow 的坐标值。
8. 背景根据图片大小伸展
在使用一张背景图片，而不考虑图片大小时，我们可以使用 background-size 属性实现图片大小的伸缩，使其适应容器大小。
.container {
background: url("图片地址") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
将此样式应用到容器中即可。
解析：
background-size 属性控制背景图片的宽高，cover 可以根据容器大小自动将图片等比例放大缩小，使其适应容器大小，而 center 则是控制图片的水平和垂直位置。
9. 垂直居中文字
垂直居中元素中的文字，我们可以使用 text-align 和 line-height 属性实现。
.container {
height: 300px;
line-height: 300px;
text-align: center;
}
将此样式应用到容器中即可。
解析：
line-height 属性设置行高，与容器高度一致。文本之间的间隔就是通过 line-height 来决定的，text-align 属性控制文本水平居中。
10. 只有几个字的垂直居中
当元素中只有几个字时，我们可以使用 ::before 或 ::after 伪元素加上空格，使文字垂直居中。
.container::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.container span {
display: inline-block;
vertical-align: middle;
}
.container {
height: 300px;
text-align: center;
display: table-cell;
}
将此样式应用到容器中即可。
解析：
在上述代码中，使用 display:table-cell 属性来实现元素等高，当元素中只有一个 span 时，使用 ::before 伪元素来制作一个高度与容器相同的空白块，并使用 vertical-align:middle;铺满就可以使文本垂直居中。
11. 设置 HTML 跟字体大小
当需要设定 HTML 元素中的字体大小，并使得不同设备屏幕下的样式保持一致，可以通过设置浏览器默认字体设置来实现。
html {
font-size: 62.5%;
}
.container {
font-size: 2rem;
}
将此样式应用到容器中即可。
解析：
在上述代码中，首先通过设置浏览器默认字体大小，即 62.5% 转化为 10px，因此以这种设置方式进行缩放时，为了方便，我们一般只需要将 rem 中 1rem 设置为10px即可，这样 2rem 就是20px。
12.涟漪效果
在点击按钮或链接时，使得涟漪特效出来的是实现按钮动画的常见效果。
<a href="#" class="btn">点击我</a>
CSS 样式如下：
.btn {
position: relative;
display: inline-block;
overflow: hidden;
padding: 10px 20px;
border: none;
border-radius: 20px;
background-color: #57B8FF;
color: #fff;
font-size: 18px;
text-align: center;
cursor: pointer;
}
.btn:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
opacity: 0;
pointer-events: none;
width: 10px;
height: 10px;
}
.btn:hover::after {
width: 200%;
height: 200%;
opacity: 1;
transition: all 0.3s;
}
解析：
涟漪特效通过添加一个圆形伪元素实现，在没有悬停时，通过设置圆形伪元素的位置、大小、背景颜色、边框半径、透明度等样式；在悬停时，通过改变宽度、高度、透明度、透明度变化时间等样式实现涟漪特效。
总结：
在前端开发中，CSS技术扮演着重要的角色，学会运用些小技巧，对效果的制作、优化、维护都会有很大提升。常见的一些部分，如标记、滚动条、容器、布局、字体等等，都有相应的 CSS 技巧和方法来实现。拓宽 CSS 技能和知识，才能更好地涵盖页面制作和后端开发。