kW928資訊網(wǎng)——每日最新資訊28at.com

大家好，在上一篇文章里 CSS小知識(shí)，分享14個(gè)你可能還未用上但又實(shí)用的CSS屬性（上）我們一起學(xué)習(xí)了上半部分，這篇文章我們我們繼續(xù)學(xué)習(xí)下半部分。kW928資訊網(wǎng)——每日最新資訊28at.com

八、CSS Shake Effect 晃動(dòng)效果

CSS Shake Effect 是一種使用 CSS 制作的晃動(dòng)效果。這種效果通常用于錯(cuò)誤提類似的場(chǎng)景。kW928資訊網(wǎng)——每日最新資訊28at.com

如下段代碼所示，當(dāng)用戶輸入無(wú)效輸入時(shí)，此“搖動(dòng)”動(dòng)畫效果會(huì)搖動(dòng)輸入字段。它簡(jiǎn)單而優(yōu)雅。例如，如果用戶在文本字段中輸入數(shù)字而不是字母，輸入字段將會(huì)抖動(dòng)。kW928資訊網(wǎng)——每日最新資訊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; }}

kW928資訊網(wǎng)——每日最新資訊28at.com

九、Text Overflow 文字溢出

您可以使用此屬性截?cái)嘁绯龅奈谋尽Ｖ冈谖谋境鲈貙挾葧r(shí)，自動(dòng)隱藏超出部分的文本。在 CSS 中，可以使用 text-overflow 屬性來(lái)實(shí)現(xiàn)這種效果。可以使用省略號(hào) (...) 或自定義字符串對(duì)其進(jìn)行截取縮略顯示。kW928資訊網(wǎng)——每日最新資訊28at.com

下面是一個(gè)簡(jiǎn)單的代碼示例：kW928資訊網(wǎng)——每日最新資訊28at.com

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

HTML:kW928資訊網(wǎng)——每日最新資訊28at.com

<div class="overflow-ellipsis">文本如果超出容器會(huì)被截?cái)嗖⑻砑邮÷蕴?hào)</div>

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

十、column-count 內(nèi)容多列屬性

CSS 的 column-count 屬性可以用來(lái)將一個(gè)元素的內(nèi)容分成多列，以實(shí)現(xiàn)報(bào)紙或雜志的頁(yè)面布局效果。kW928資訊網(wǎng)——每日最新資訊28at.com

下面是一個(gè)簡(jiǎn)單的代碼示例：kW928資訊網(wǎng)——每日最新資訊28at.com

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

HTML:kW928資訊網(wǎng)——每日最新資訊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>

上面的代碼定義了一個(gè)名為 "multi-column" 的類，并將其應(yīng)用于一個(gè)元素。這個(gè)類使用了 column-count: 2; 來(lái)將內(nèi)容分成兩列，并使用了 column-gap: 20px; 來(lái)設(shè)置列之間的間隔。kW928資訊網(wǎng)——每日最新資訊28at.com

還有 column-width 屬性可以用來(lái)設(shè)置每一列的寬度，若同時(shí)設(shè)置 column-width 和 column-count 屬性，則優(yōu)先使用 column-width，column-count 會(huì)自動(dòng)調(diào)整。kW928資訊網(wǎng)——每日最新資訊28at.com

在實(shí)際使用中，需要結(jié)合其他屬性，如 column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width等等來(lái)實(shí)現(xiàn)多列布局的效果。kW928資訊網(wǎng)——每日最新資訊28at.com

完成后的效果：kW928資訊網(wǎng)——每日最新資訊28at.com

kW928資訊網(wǎng)——每日最新資訊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。kW928資訊網(wǎng)——每日最新資訊28at.com

在實(shí)際使用中，需要注意瀏覽器的兼容性問題，需要使用前請(qǐng)查詢?yōu)g覽器對(duì) background-blend-mode 的支持情況。更多相關(guān)的用法建議查詢
https://www.w3schools.com/cssref/pr_background-blend-mode.php 這個(gè)網(wǎng)站。kW928資訊網(wǎng)——每日最新資訊28at.com

結(jié)束

今天的分享就到這里，14 個(gè)關(guān)于CSS的屬性就分享到這里，希望對(duì)你有所幫助。kW928資訊網(wǎng)——每日最新資訊28at.com

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

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

下一篇： 我們聊聊DDD、SOA、微服務(wù)和微內(nèi)核