zsT28資訊網——每日最新資訊28at.com

大家好，在上一篇文章里 CSS小知識，分享14個你可能還未用上但又實用的CSS屬性（上）我們一起學習了上半部分，這篇文章我們我們繼續學習下半部分。zsT28資訊網——每日最新資訊28at.com

八、CSS Shake Effect 晃動效果

CSS Shake Effect 是一種使用 CSS 制作的晃動效果。這種效果通常用于錯誤提類似的場景。zsT28資訊網——每日最新資訊28at.com

如下段代碼所示，當用戶輸入無效輸入時，此“搖動”動畫效果會搖動輸入字段。它簡單而優雅。例如，如果用戶在文本字段中輸入數字而不是字母，輸入字段將會抖動。zsT28資訊網——每日最新資訊28at.com

HTML部分

<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>

CSS部分

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; }}

zsT28資訊網——每日最新資訊28at.com

九、Text Overflow 文字溢出

您可以使用此屬性截斷溢出的文本。指在文本超出元素寬度時，自動隱藏超出部分的文本。在 CSS 中，可以使用 text-overflow 屬性來實現這種效果。可以使用省略號 (...) 或自定義字符串對其進行截取縮略顯示。zsT28資訊網——每日最新資訊28at.com

下面是一個簡單的代碼示例：zsT28資訊網——每日最新資訊28at.com

.overflow-ellipsis {  width: 100px; /* 定義元素的寬度 */  white-space: nowrap; /* 防止文本換行 */  overflow: hidden; /* 隱藏超出部分 */  text-overflow: ellipsis; /* 添加省略號來指示隱藏的文本 */}

HTML:zsT28資訊網——每日最新資訊28at.com

<div class="overflow-ellipsis">文本如果超出容器會被截斷并添加省略號</div>

上面的代碼定義了一個名為 "overflow-ellipsis" 的類，并將其應用于一個元素。這個類使用了 white-space: nowrap; 來防止文本換行，使用了 overflow: hidden; 來隱藏超出部分，并使用了 text-overflow: ellipsis; 來添加省略號（...）來指示隱藏的文本。zsT28資訊網——每日最新資訊28at.com

十、column-count 內容多列屬性

CSS 的 column-count 屬性可以用來將一個元素的內容分成多列，以實現報紙或雜志的頁面布局效果。zsT28資訊網——每日最新資訊28at.com

下面是一個簡單的代碼示例：zsT28資訊網——每日最新資訊28at.com

.multi-column {  column-count: 2; /* 將內容分成兩列 */  column-gap: 20px; /* 設置列之間的間隔 */}

HTML:zsT28資訊網——每日最新資訊28at.com

<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; 來設置列之間的間隔。zsT28資訊網——每日最新資訊28at.com

還有 column-width 屬性可以用來設置每一列的寬度，若同時設置 column-width 和 column-count 屬性，則優先使用 column-width，column-count 會自動調整。zsT28資訊網——每日最新資訊28at.com

在實際使用中，需要結合其他屬性，如 column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width等等來實現多列布局的效果。zsT28資訊網——每日最新資訊28at.com

完成后的效果：zsT28資訊網——每日最新資訊28at.com

zsT28資訊網——每日最新資訊28at.com

background-blend-mode 屬性有很多可用的值，如：normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity。zsT28資訊網——每日最新資訊28at.com

在實際使用中，需要注意瀏覽器的兼容性問題，需要使用前請查詢瀏覽器對 background-blend-mode 的支持情況。更多相關的用法建議查詢
https://www.w3schools.com/cssref/pr_background-blend-mode.php 這個網站。zsT28資訊網——每日最新資訊28at.com

結束

今天的分享就到這里，14 個關于CSS的屬性就分享到這里，希望對你有所幫助。zsT28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-39476-0.htmlCSS小知識，分享14個你可能還未用上但又實用的CSS屬性（下）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Java 11 到 Java 21：無縫遷移的可視化指南

下一篇： 我們聊聊DDD、SOA、微服務和微內核