建站
咨詢
售后
建站咨詢
新聞中心
大家好，在上一篇文章里 CSS小知識，分享14個你可能還未用上但又實用的CSS屬性（上）我們一起學(xué)習(xí)了上半部分，這篇文章我們我們繼續(xù)學(xué)習(xí)下半部分。
創(chuàng)新互聯(lián)是少有的成都網(wǎng)站建設(shè)、做網(wǎng)站、營銷型企業(yè)網(wǎng)站、小程序開發(fā)、手機APP,開發(fā)、制作、設(shè)計、買鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,從2013年創(chuàng)立,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評
八、CSS Shake Effect 晃動效果
CSS Shake Effect 是一種使用 CSS 制作的晃動效果。這種效果通常用于錯誤提類似的場景。
如下段代碼所示，當用戶輸入無效輸入時，此“搖動”動畫效果會搖動輸入字段。它簡單而優(yōu)雅。例如，如果用戶在文本字段中輸入數(shù)字而不是字母，輸入字段將會抖動。
HTML部分
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; }
}
九、Text Overflow 文字溢出
您可以使用此屬性截斷溢出的文本。指在文本超出元素寬度時，自動隱藏超出部分的文本。在 CSS 中，可以使用 text-overflow 屬性來實現(xiàn)這種效果?？梢允褂檬÷蕴?(...) 或自定義字符串對其進行截取縮略顯示。
下面是一個簡單的代碼示例：
.overflow-ellipsis {
width: 100px; /* 定義元素的寬度 */
white-space: nowrap; /* 防止文本換行 */
overflow: hidden; /* 隱藏超出部分 */
text-overflow: ellipsis; /* 添加省略號來指示隱藏的文本 */
}HTML:
文本如果超出容器會被截斷并添加省略號上面的代碼定義了一個名為 "overflow-ellipsis" 的類，并將其應(yīng)用于一個元素。這個類使用了 white-space: nowrap; 來防止文本換行，使用了 overflow: hidden; 來隱藏超出部分，并使用了 text-overflow: ellipsis; 來添加省略號（...）來指示隱藏的文本。
十、column-count 內(nèi)容多列屬性
CSS 的 column-count 屬性可以用來將一個元素的內(nèi)容分成多列，以實現(xiàn)報紙或雜志的頁面布局效果。
下面是一個簡單的代碼示例：
.multi-column {
column-count: 2; /* 將內(nèi)容分成兩列 */
column-gap: 20px; /* 設(shè)置列之間的間隔 */
}HTML:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, augue non tincidunt eleifend, magna massa varius lorem, at luctus augue tellus in nibh.
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.
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.
上面的代碼定義了一個名為 "multi-column" 的類，并將其應(yīng)用于一個元素。這個類使用了 column-count: 2; 來將內(nèi)容分成兩列，并使用了 column-gap: 20px; 來設(shè)置列之間的間隔。
還有 column-width 屬性可以用來設(shè)置每一列的寬度，若同時設(shè)置 column-width 和 column-count 屬性，則優(yōu)先使用 column-width，column-count 會自動調(diào)整。
在實際使用中，需要結(jié)合其他屬性，如 column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width等等來實現(xiàn)多列布局的效果。
十一、CSS Animations 動畫
動畫逐漸改變元素的樣式。只有先指定關(guān)鍵幀才能使用它。關(guān)鍵幀描述動畫元素如何出現(xiàn)在動畫序列中的等相關(guān)特性。
示例代碼：
div{
width: 200px;
height: 200px;
background-color: blue;
animation-name: square;
animation-duration: 8s;
}
@keyframes square{
from {background-color: blue;}
to {background-color: black;}
}十二、Shadow Effects 陰影效果
text-shadow 屬性可以在文本上添加陰影效果，可以使用它來增強文本的可讀性和吸引力。
box-shadow 屬性可以在元素上添加陰影效果，可以使用它來增強元素的立體感和吸引力。
下面是 text-shadow 和 box-shadow 的一個簡單的代碼示例：
.text-shadow {
text-shadow: 2px 2px 4px #000000; /* x-offset, y-offset, blur-radius, color */
}
.box-shadow {
box-shadow: 2px 2px 4px #000000; /* x-offset, y-offset, blur-radius, color */
}HTML代碼
This is text with shadow
This is a box with shadow上面的代碼定義了一個名為 "text-shadow" 的類和一個名為 "box-shadow" 的類，分別將其應(yīng)用于一個文本元素和一個盒子元素。這兩個類都使用了 x-offset: 2px; y-offset: 2px; blur-radius: 4px; color: #000000; 來定義陰影的樣式。
陰影的偏移值(x-offset y-offset)可以正值或負值，正值為陰影在元素的下方右方，負值為陰影在元素的上方左方。陰影的模糊半徑和陰影的顏色也可以根據(jù)需要調(diào)整。
在實際使用中，還可以使用 box-shadow: inset; 屬性來改變陰影為內(nèi)陰影。
十三、CSS Clipping
clip-path 屬性可以用來剪切元素的形狀。它可以使用一個圖形或路徑來定義剪切區(qū)域。
如下段代碼示例：
.bg{
height: 100%;
width: 100%;
background-color: rgba(199, 62, 133, 0.9);
clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
position: absolute;
}https://bennettfeely.com/clippy/ 這個工具網(wǎng)站，是一種通過將元素剪輯為基本形狀（圓形、橢圓形、多邊形或插圖）的可視化在線代碼生成工具，大大節(jié)省的你的時間。
十四、CSS background-blend-mode 屬性
background-blend-mode 屬性可以用來控制背景圖像與背景顏色的混合模式。它可以使用一系列的混合模式來定義背景的外觀，如添加顏色、陰影、高光等。
您可以使用 background-blend-mode 屬性制作令人驚嘆的背景。
如下段代碼所示：
div{
width: 600px;
height: 400px;
background-repeat: no-repeat, repeat;
background-position: center;
background-image: url("flower.png"), url("background-image.png");
background-blend-mode: color;
}完成后的效果：
background-blend-mode 屬性有很多可用的值，如：normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity。
在實際使用中，需要注意瀏覽器的兼容性問題，需要使用前請查詢?yōu)g覽器對 background-blend-mode 的支持情況。更多相關(guān)的用法建議查詢
https://www.w3schools.com/cssref/pr_background-blend-mode.php 這個網(wǎng)站。
結(jié)束
今天的分享就到這里，14 個關(guān)于CSS的屬性就分享到這里，希望對你有所幫助。
新聞標題：CSS小知識，分享14個你可能還未用上但又實用的CSS屬性（下）
地址分享：http://www.5511xx.com/article/ccoidpe.html
