大家好，在上一篇文章里 CSS小知識，分享14個你可能還未用上但又實用的CSS屬性（上）我們一起學(xué)習(xí)了上半部分，這篇文章我們我們繼續(xù)學(xué)習(xí)下半部分。

八、CSS Shake Effect 晃動效果

CSS Shake Effect 是一種使用 CSS 制作的晃動效果。這種效果通常用于錯誤提類似的場景。

如下段代碼所示，當(dāng)用戶輸入無效輸入時，此“搖動”動畫效果會搖動輸入字段。它簡單而優(yōu)雅。例如，如果用戶在文本字段中輸入數(shù)字而不是字母，輸入字段將會抖動。

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

九、Text Overflow 文字溢出

您可以使用此屬性截斷溢出的文本。指在文本超出元素寬度時，自動隱藏超出部分的文本。在 CSS 中，可以使用 text-overflow 屬性來實現(xiàn)這種效果?？梢允褂檬÷蕴?(...) 或自定義字符串對其進(jìn)行截取縮略顯示。

下面是一個簡單的代碼示例：

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

HTML:

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

上面的代碼定義了一個名為 "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:

<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" 的類，并將其應(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代碼

<p class="text-shadow">This is text with shadow</p>
<div class="box-shadow">This is a box with shadow</div>

上面的代碼定義了一個名為 "text-shadow" 的類和一個名為 "box-shadow" 的類，分別將其應(yīng)用于一個文本元素和一個盒子元素。這兩個類都使用了 x-offset: 2px; y-offset: 2px; blur-radius: 4px; color: #000000; 來定義陰影的樣式。

陰影的偏移值(x-offset y-offset)可以正值或負(fù)值，正值為陰影在元素的下方右方，負(fù)值為陰影在元素的上方左方。陰影的模糊半徑和陰影的顏色也可以根據(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的屬性就分享到這里，希望對你有所幫助。