广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章给大家分享12个有趣且实用的 CSS 小技巧，让前端开发更轻松，快来收藏吧，希望对大家有所帮助！
（推荐学习：css视频教程）
1. 打字效果代码实现：
<div class="wrapper"> <div class="typing-demo"> 有趣且实用的 CSS 小技巧 </div></div>登录后复制
.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}登录后复制实现效果：
2. 设置阴影当使用透明图像时，可以使用 drop-shadow() 函数在图像上创建阴影，而不是使用 box shadow 属性在元素的整个框后面创建矩形阴影：
<div class="wrapper"> <div class="mr-2"> <div class="mb-1 text-center"> box-shadow </div> <img class="box-shadow" src="https://markodenic.com/man_working.png" alt="Image with box-shadow"> </div> <div> <div class="mb-1 text-center"> drop-shadow </div> <img class="drop-shadow" src="https://markodenic.com/man_working.png" alt="Image with drop-shadow"> </div></div>登录后复制
.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.mr-2 { margin-right: 2em;}.mb-1 { margin-bottom: 1em;}.text-center { text-align: center;}.box-shadow { box-shadow: 2px 4px 8px #585858;}.drop-shadow { filter: drop-shadow(2px 4px 8px #585858);}登录后复制对比效果：
3. 平滑滚动无需 JavaScript 即可实现平滑滚动，只需一行 CSS：scroll-behavior: smooth；
<nav> Scroll to: <a href="#sectionA" class="link bg-red">A</a> <a href="#sectionB" class="link bg-blue">B</a> <a href="#sectionC" class="link bg-green">C</a></nav><div class="wrapper"> <div id="sectionA" class="section bg-red">A</div> <div id="sectionB" class="section bg-blue">B</div> <div id="sectionC" class="section bg-green">C</div></div>登录后复制
html { scroll-behavior: smooth;}nav { position: fixed; left: calc(50vw - 115px); top: 0; width: 200px; text-align: center; padding: 15px; background: #fff; box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);}nav .link { padding: 5px; color: white;}.section { height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 5em; text-shadow: 0px 2px 0px #b2a98f, 0px 4px 3px rgba(0,0,0,0.15), 0px 8px 1px rgba(0,0,0,0.1);}.bg-red { background: #de5448;}.bg-blue { background: #4267b2;}.bg-green { background: #4CAF50;}登录后复制实现效果：
4. 自定义光标我们可以使用自定义图像，甚至表情符号来作为光标。
<div class="wrapper"> <div class="tile"> Default </div> <div class="tile tile-image-cursor"> Image </div> <div class="tile tile-emoji-cursor"> Emoji </div></div>登录后复制
.wrapper { display: flex; height: 100vh; align-items: center; justify-content: center; background: #4776e6; background: linear-gradient(to right, #4776e6, #8e54e9); padding: 0 10px;}.tile { width: 200px; height: 200px;display: flex; align-items: center; justify-content: center; background-color: #de5448; margin-right: 10px;color: #fff; font-size: 1.4em; text-align: center; }.tile-image-cursor { background-color: #1da1f2; cursor: url(https://picsum.photos/20/20), auto;}.tile-emoji-cursor { background-color: #4267b2; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>?</text></svg>"), auto;}登录后复制实现效果：
5. 截断文本一行文本溢出隐藏：
<div>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>登录后复制
div { width: 200px; background-color: #fff; padding: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}登录后复制实现效果：
还可以使用“-webkit-line-clamp”属性将文本截断为特定的行数。文本将在截断的地方会显示省略号：
.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}0登录后复制实现效果：
6. 自定义选中样式CSS 伪元素::selection，可以用来自定义用户选中文档的高亮样式。
.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}1登录后复制.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}2登录后复制实现效果：
7. CSS 模态框我们可以使用 CSS 中的 :target 伪元素来创建一个模态框。
.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}3登录后复制.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}4登录后复制实现效果：
8. 空元素样式可以使用 :empty 选择器来设置完全没有子元素或文本的元素的样式：
.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}5登录后复制.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}6登录后复制实现效果：
9. 创建自定义滚动条.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}7登录后复制.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}8登录后复制实现效果：
10. 动态工具提示可以使用 CSS 函数 attr() 来创建动态的纯 CSS 工具提示 。
.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em;}@keyframes typing { from { width: 0 }} @keyframes blink { 50% { border-color: transparent }}9登录后复制<div class="wrapper"> <div class="mr-2"> <div class="mb-1 text-center"> box-shadow </div> <img class="box-shadow" src="https://markodenic.com/man_working.png" alt="Image with box-shadow"> </div> <div> <div class="mb-1 text-center"> drop-shadow </div> <img class="drop-shadow" src="https://markodenic.com/man_working.png" alt="Image with drop-shadow"> </div></div>0登录后复制
实现效果：
11. 圆形渐变边框<div class="wrapper"> <div class="mr-2"> <div class="mb-1 text-center"> box-shadow </div> <img class="box-shadow" src="https://markodenic.com/man_working.png" alt="Image with box-shadow"> </div> <div> <div class="mb-1 text-center"> drop-shadow </div> <img class="drop-shadow" src="https://markodenic.com/man_working.png" alt="Image with drop-shadow"> </div></div>1登录后复制
<div class="wrapper"> <div class="mr-2"> <div class="mb-1 text-center"> box-shadow </div> <img class="box-shadow" src="https://markodenic.com/man_working.png" alt="Image with box-shadow"> </div> <div> <div class="mb-1 text-center"> drop-shadow </div> <img class="drop-shadow" src="https://markodenic.com/man_working.png" alt="Image with drop-shadow"> </div></div>2登录后复制
实现效果：
12. 灰度图片可以使用 grayscale() 过滤器功能将输入图像转换为灰度。
（学习视频分享：web前端入门教程）
以上就是分享12个实用的 CSS 小技巧（快来收藏）的详细内容，更多请关注9543建站博客其它相关文章！
发表评论