大家好，在上一篇文章里 CSS小知识，分享14个你可能还未用上但又实用的CSS属性（上）我们一起学习了上半部分，这篇文章我们我们继续学习下半部分。
CSS Shake Effect 是一种使用 CSS 制作的晃动效果。这种效果通常用于错误提类似的场景。
如下段代码所示，当用户输入无效输入时，此“摇动”动画效果会摇动输入字段。它简单而优雅。例如，如果用户在文本字段中输入数字而不是字母，输入字段将会抖动。
<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>input:invalid{ animation: shake 0.2s ease-in-out 0s 2; box-shadow: 0 0 0.4em red;} @keyframes shake { 0% { margin-left: 0rem; } 25% { margin-left: 0.5rem; } 75% { margin-left: -0.5rem; } 100% { margin-left: 0rem; }}
您可以使用此属性截断溢出的文本。指在文本超出元素宽度时，自动隐藏超出部分的文本。在 CSS 中，可以使用 text-overflow 属性来实现这种效果。可以使用省略号 (...) 或自定义字符串对其进行截取缩略显示。
下面是一个简单的代码示例：
.overflow-ellipsis { width: 100px; /* 定义元素的宽度 */ white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 添加省略号来指示隐藏的文本 */}HTML:
<div class="overflow-ellipsis">文本如果超出容器会被截断并添加省略号</div>上面的代码定义了一个名为 "overflow-ellipsis" 的类，并将其应用于一个元素。这个类使用了 white-space: nowrap; 来防止文本换行，使用了 overflow: hidden; 来隐藏超出部分，并使用了 text-overflow: ellipsis; 来添加省略号（...）来指示隐藏的文本。
CSS 的 column-count 属性可以用来将一个元素的内容分成多列，以实现报纸或杂志的页面布局效果。
下面是一个简单的代码示例：
.multi-column { column-count: 2; /* 将内容分成两列 */ column-gap: 20px; /* 设置列之间的间隔 */}HTML:
<div class="multi-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, augue non tincidunt eleifend, magna massa varius lorem, at luctus augue tellus in nibh.</p> <p>Proin velit orci, pellentesque vel malesuada at, varius vel nibh. Nam eget mauris euismod, feugiat ipsum a, convallis enim. Aenean euismod malesuada orci eget euismod.</p> <p>Nunc vitae augue eget nulla tempus aliquet. Integer euismod quam nunc, id rhoncus magna convallis at. Nullam euismod, sem a bibendum malesuada, erat ligula molestie magna.</p></div>上面的代码定义了一个名为 "multi-column" 的类，并将其应用于一个元素。这个类使用了 column-count: 2; 来将内容分成两列，并使用了 column-gap: 20px; 来设置列之间的间隔。
还有 column-width 属性可以用来设置每一列的宽度，若同时设置 column-width 和 column-count 属性，则优先使用 column-width，column-count 会自动调整。
在实际使用中，需要结合其他属性，如 column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width等等来实现多列布局的效果。
完成后的效果：
background-blend-mode 属性有很多可用的值，如：normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity。
在实际使用中，需要注意浏览器的兼容性问题，需要使用前请查询浏览器对 background-blend-mode 的支持情况。更多相关的用法建议查询
https://www.w3schools.com/cssref/pr_background-blend-mode.php 这个网站。
今天的分享就到这里，14 个关于CSS的属性就分享到这里，希望对你有所帮助。
本文链接：http://www.28at.com/showinfo-26-39476-0.htmlCSS小知识，分享14个你可能还未用上但又实用的CSS属性（下）
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： Java 11 到 Java 21：无缝迁移的可视化指南
下一篇： 我们聊聊DDD、SOA、微服务和微内核
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
