每個前端開發(fā)需要了解的15個強大的CSS屬性

作者：前端小智 2023-07-11 07:53:51

如果使用0到100%之間的值，可以創(chuàng)建不同的效果。較低的值將保留一些顏色，而較高的值將使圖像更接近黑白。這種圖像效果可以通過CSS的濾鏡屬性實現(xiàn)。通過將圖像的filter?屬性設(shè)置為grayscale(100%)?，可以將圖像完全轉(zhuǎn)換為黑白。要創(chuàng)建不同的效果，可以嘗試不同的grayscale?值，例如grayscale(50%)將使圖像呈現(xiàn)一種半色調(diào)效果。

這篇文章介紹了15個重要的CSS屬性，旨在提高讀者的CSS知識和技能。文章以清晰的方式解釋了每個屬性的作用和用法，并提供了相應(yīng)的示例代碼。通過這篇文章，讀者可以了解到一些有趣且實用的CSS屬性。

:in-range 和:out-of-range 偽類

CSS的:in-range和:out-of-range偽類用于樣式化在指定范圍限制內(nèi)和外的輸入。

(a) :in-range

如果輸入元素的當前值在 min 和 max 屬性的范圍之間，那么它就處于范圍內(nèi)。

這個偽類可以方便地確定字段的當前值是否可接受。

(b) :out-of-range

如果輸入元素的當前值超出了min和max屬性的范圍，那么它就是超出范圍的。

它給用戶一個視覺指示，告訴他們字段值是否超出了范圍。

/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}

圖片

注意：這些偽類只適用于具有范圍限制的元素，沒有這個限制，元素就無法處于范圍內(nèi)或范圍外。

相關(guān)文檔：https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range

2. grayscale() 函數(shù)

如果使用0到100%之間的值，可以創(chuàng)建不同的效果。較低的值將保留一些顏色，而較高的值將使圖像更接近黑白。

這種圖像效果可以通過CSS的濾鏡屬性實現(xiàn)。通過將圖像的filter屬性設(shè)置為grayscale(100%)，可以將圖像完全轉(zhuǎn)換為黑白。要創(chuàng)建不同的效果，可以嘗試不同的grayscale值，例如grayscale(50%)將使圖像呈現(xiàn)一種半色調(diào)效果。

使用CSS的圖像轉(zhuǎn)換效果，可以通過調(diào)整值來輕松地將彩色圖像轉(zhuǎn)換為黑白，并實現(xiàn)各種不同的效果。

.grayscale-image{
  filter: grayscale(100%);
}

圖片

3. 玻璃效果

我們可以使用幾行代碼實現(xiàn)一個玻璃效果。玻璃效果非常美麗，可以為我們的設(shè)計增添優(yōu)雅。

Glass.CSS是最受歡迎的玻璃效果生成器，我們可以免費為項目創(chuàng)建CSS玻璃效果。只需要根據(jù)您的需求調(diào)整一些設(shè)置，并將CSS代碼復制粘貼到您的項目中即可。

.glass-effect{
   -webkit-backdrop-filter: blur(6.2px);
   backdrop-filter: blur(6.2px);
   background: rgba(255, 255, 255, 0.4);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.24); 
}

圖片

4.使用以下CSS代碼來樣式化文本

這些是一些每個人都應(yīng)該知道的非常基本的文本樣式技巧。然而，還有許多其他高級選項可供選擇。

p{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
  text-align: center;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 2px;
}

5.clamp() 函數(shù)

CSS的clamp()函數(shù)將一個值限制在兩個上下界之間。必須有一個首選值、一個最小值和一個最大值。

當字體大小根據(jù)視口變化時，clamp() 會派上用場。

p{
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

6. 居中一個 div

開發(fā)者最重要的任務(wù)之一是將一個div居中。有很多其他的選項可以實現(xiàn)div的居中。在這個例子中，我們使用CSS的flexbox來實現(xiàn)div的水平和垂直居中。

div{
  display: flex;
  justify-content: center;
  align-items: center;
}

7. CSS線性漸變

要創(chuàng)建一個漸變的CSS線性漸變，只需使用下面的CSS代碼。

div {
    background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
  }

圖片

8. CSS抖動效果

這個“搖晃”動畫效果會在用戶輸入無效內(nèi)容時晃動輸入框。它簡單而優(yōu)雅。例如，如果用戶在文本框中輸入數(shù)字而不是字母，輸入框?qū)u晃。

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

圖片

9. 文本溢出

可以使用此屬性來截斷溢出的文本。它可以被裁剪并顯示為省略號(...)或自定義字符串。

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  width: 200px;
 }
div.text {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}  
div.text:hover {
  overflow: visible;
}

10. 'column-count' 屬性

它指定了一個元素應(yīng)該被分成的列數(shù)。

p{
  column-count: 2;
}

圖片

11. CSS動畫

動畫逐漸改變元素的樣式。只有在指定關(guā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;}
}

12. 陰影效果

使用CSS，我們可以為文本和元素添加效果。將屬性定義為text-shadow和box-shadow。使用text-shadow為文本添加陰影，使用box-shadow為元素添加陰影。

(i) text-shadow: It gives the text a shadow. (i) text-shadow: 它給文本添加了陰影。

h1{
  color: blue;
  text-shadow: 2px 2px 4px #000000;
}

圖片

box-shadow：用于給元素添加陰影效果。下面的示例中，實際的 div 元素是紫色的，盒子陰影是天藍色的，并且設(shè)置在右下方 10 像素處。

div{
  width: 200px;
  height: 200px;
  padding: 15px;
  background-color: purple;
  box-shadow: 10px 10px skyblue;
}

圖片

13. CSS剪裁

使用clip-path屬性，您可以僅顯示元素的一部分，同時隱藏其余部分。

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

圖片

14.CSS 背景混合模式屬性

該屬性描述了背景顏色和圖像（或兩個圖像）的混合方式。一個與每個背景圖像對應(yīng)的混合模式列表組成了該值。混合模式指定了背景圖層如何混合（顏色或圖片）。

可以使用background-blend-mode屬性創(chuàng)建令人驚艷的背景。

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

圖片

15. 色相旋轉(zhuǎn)動畫

還有其他一些選項可供選擇。如果你想了解更多關(guān)于這個屬性的信息，請在W3Schools上查看。

可以在網(wǎng)站的主要部分和按鈕上添加色相旋轉(zhuǎn)動畫。例如，天氣預報網(wǎng)站的主要部分將因此而變得令人驚艷。

button {
  background: linear-gradient(35deg, #8C52FF, #C669FF);
  animation: hue-rotate 3s linear infinite alternate;
}
@keyframes hue-rotate {
  to {
    filter: hue-rotate(85deg);
 }
}

圖片

責任編輯：武曉燕來源：大遷世界

CSS 效果圖像