CSS 有很多令人欣喜的小技巧，可以让我们的页面效果更加美丽，现在，就让我们来看看工作中非常实用的 CSS 技巧吧。
一、文本选择颜色
当我们选中网页上的文字时，通常的效果是蓝底白字，其实，底色和字体颜色是可以改变的。
css-1.gif
我们可以使用伪元素来实现这种效果：
::selection {
background-color: red;
color: gold;
}
二、首字下沉
首字下沉，是否似曾相识呢？哦，是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果，其他文字围绕在它周围。
css-2.png
看上去还是这么回事。
三、平滑滚动
通过锚点，我们可以滚动到网页特定的位置，原始的锚点跳转是没有过渡效果的。注意滚动条：
css-3.gif
通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。
css-4.gif
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
html {
scroll-behavior:smooth;
}
section {
height: 500px;
text-align: center;
color: #fff;
}
section:nth-child(even) {
background-color: red;
}
section:nth-child(odd) {
background-color: gold;
}
</style>
<body>
<a href="#part1">第一屏</a>
<a href="#part2">第二屏</a>
<a href="#part3">第三屏</a>
<a href="#part4">第四屏</a>
<div class="container">
<section id="part1">这是第一屏内容 </br>前端技术驿站</section>
<section id="part2">这是第二屏内容 </br>前端技术驿站</section>
<section id="part3">这是第三屏内容 </br>前端技术驿站</section>
<section id="part4">这是第四屏内容 </br>前端技术驿站</section>
</div>
</body>
</html>
四、输入插入符号颜色
caret-color 属性可以让我们自定义 input 框闪烁的光标，是不是很神奇鸭
.form-input {
width: 130px;
height: 26px;
padding-left: 10px;
border-radius: 6px;
caret-color: gold;
}
css-5.gif
五、投影
给透明背景图片加背景，感觉很厉害的样子。两行 CSS 样式九搞定咯：
css-6.png
.img-container img {
width: 200px;
object-fit: cover;
filter: drop-shadow(30px 10px 6px gold);
}
六、自定义滚动条
我们可以修改滚动条的样式，滚动条变得更加炫酷。
.container::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.container::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent);
}
.container::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ededed;
}
七、禁用用户选择
如果你不想让用户选中页面上的文字，就可以用这个特性了。
.container {
user-select: none;
}
八、伪元素增大点击热区
<style type="text/css">
.btn::before {
content:"";
position:absolute;
top:-10px;
right:-10px;
bottom:-10px;
left:-10px;
}
</style>
<body>
<button class="btn" type="button">点击</button>
</body>
九、IE盒子模型
很多情况下都需要应用到IE盒子模型的特性，让元素的宽度、高度包含border和padding。
box-sizing: border-box;
十、CSS实现换行
//不换行
white-space:nowrap;
//自动换行
word-wrap: break-word;
word-break: normal;
//强制换行
word-break:break-all;
网友评论