本文跟大家分享一些在技術文檔中很少提到的CSS屬性和值，但是，在我看來，對于提高web界面開發的速度和質量特別有幫助。文章中涉及的很多特性都是實驗性質的，現代瀏覽器基本支持了大部分了，如果在使用下面提到的屬性的時候又需要兼容主流瀏覽器的時候，可以先查看一下Can I use。

1. flex + gap

在談論到 Flexbox的時候，不得不提 gap 屬性，是用來設置網格行與列之間的間隙（gutters），該屬性是row-gap 和 column-gap 的簡寫形式。

.flex-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

效果如下：

在線預覽：https://codepen.io/quintiontang/pen/xxdKpPJ

2. grid + place-items

它允許相關的布局（如 grid 或 Flexbox）中可以同時沿著塊級和內聯方向對齊元素，可以僅用兩行代碼實現水平和垂直對齊項目。

place-items 是 justify-items 和 align-items 的簡寫屬性，可以一次應用于一個或多個（子）單元格。

.grid-wrapper {
    display: grid;
    height: 98vh;
    background-color: #efefef;
}
.center-block {
    display: grid;
    place-items: center;
}

效果如下：

在線預覽：https://codepen.io/quintiontang/pen/MWmgrvo

3. flex + margin

水平和垂直對其項目的另一種實現方式，使用組合 display:flex 和 margin:auto 的組合。

.grid-wrapper {
  display: flex;
  height: 98vh;
  background-color: #efefef;
}
.center-block {
  margin: auto;
}

使用下面的代碼也是可以實現同樣的效果：

.grid-wrapper {
  display: flex;
  height: 98vh;
  background-color: #efefef;
  justify-content: center;
  align-items: center;
}

效果如下：

在線預覽：https://codepen.io/quintiontang/pen/yLbBpxz

4. columns

這個屬性允許將文本拆分為列，column-count 屬性指定列數，column-gap 設置列間間隙，column-rule 設置列間垂直線的樣式。而 columns 是 column-count和 column-width 的簡寫屬性。

樣式代碼如下：

p {
  margin: 1em;
  column-count: 4;
  column-gap: 2em;
  column-rule: 1px dotted #506ee4;
  line-height: 1.6;
  text-align: justify;
}

html 代碼：

<p>卡耐基對微笑有這樣的描述：“它在家中產生，他不能買，不能求，不能借，不能偷，因為在人們得到它之前，對誰都是無用的東西，他給予后人之后，會使你得到別人的好感，它是疲倦者的休息，希望的陽光，悲哀者的力量，又是大自然免費賦予人們的一種解除苦難的良藥。” </p>

效果如下：

在線預覽：https://codepen.io/quintiontang/pen/XWRrVxq

5. inline-flex

此屬性允許創建具有 Flexbox 功能的內聯元素，過多的描述不如實例：

HTML 結構代碼如下：

<span>??</span>
<span>??</span>
<span>??</span>
<span>??</span>

主要樣式表代碼：

span {
  width: 2.5em;
  height: 2.5em;
  /* --inline-flex設置開始-- */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* --inline-flex設置結束-- */
  background: #506ee4;
  box-shadow: 0 7px 14px 0 rgb(0 4 68 / 50%);
  font-size: 1.2rem;
  outline: 1px dashed #fff;
  outline-offset: -5px;
}

效果如下：

在線預覽：https://codepen.io/quintiontang/pen/yLbBpWp

6. filter

filter 屬性允許對元素應用一些視覺效果，渲染一些復雜的圖形效果，如模糊、顏色偏移、濾鏡等，主要應用于 svg 濾鏡元素。

下面列出了 filter 可用的屬性值及功能說明：

• url()：獲取指向SVG過濾器的URI，例如：filter: url("media.svg");
• blur()：將高斯模糊應用于輸入圖像，只接受具體的長度值，不接受百分比值，默認為0。例如：filter: blur(1px);
• brightness()：將線性乘法器應用于輸入圖像，使其看起來或多或少地變得明亮。值為 0％ 將創建全黑圖像，值為 100％ 保持不變，例如：filter: brightness(50%);
• contrast()：調整輸入圖像的對比度，值是 0% 創建全黑圖像，值是 100%，圖像不變，值可以超過 100%。例如：filter: contrast(200%);
• drop-shadow()：對輸入圖像應用陰影效果，陰影可以設置模糊度的，以特定顏色畫出的遮罩圖的偏移版本，最終合成在圖像下方。例如：filter: drop-shadow(16px 16px 20px #ff0000);
• grayscale()：將改變輸入圖像灰度，amount 的值定義了轉換的比例，值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化，值在 0% - 100% 之間，則是效果的線性乘數。例如：filter: grayscale(100%);
• hue-rotate()：在輸入圖像上應用色相旋轉，例如：filter: hue-rotate(90deg);
• invert()：反轉輸入圖像
• opacity()：轉化圖像的透明度
• saturate()：轉換圖像飽和度
• sepia()：將圖像轉換為深褐色

是快速的實現網站主題顏色切換的方案之一，下面代碼實現了一個簡答的切換主題的效果，點擊復選框即可看到。

主要CSS代碼如下：

.theme:checked + .typography {
  filter: invert();
}

效果如下：

 

在線預覽：https://codepen.io/quintiontang/pen/wvdwyWd

推薦一個庫 CSSgram ，可以用于使用 CSS 過濾器和混合模式重新創建 Instagram 過濾器。

7. drop-shadow

filter 的 drop-shadow() 屬性與 box-shadow 屬性不同，它在應用效果方面類似，允許向圖像本身添加陰影，而不是給它所在的框添加陰影。

如下效果：

第一個效果box-shadow: 0 7px 14px 0 #ff0000; ，第二個效果是filter: drop-shadow(0 7px 14px #ff0000);

在線預覽：https://codepen.io/quintiontang/pen/JjNPprP

8. object-fit

object-fit 屬性控制被替換元素（如 img 和 video）的長寬比（如果它們有寬度或高度）以及縮放過程。

例如，scale-down 值可以保持圖像的寬高比，而不用考慮框的大小：

<img src="https://pics.freeicons.io/uploads/icons/png/21088442871540553614-256.png" alt="javascript" />
<img src="https://pics.freeicons.io/uploads/icons/png/14016183671580802975-256.png" alt="typescript" />
<img src="https://pics.freeicons.io/uploads/icons/png/191213921552037062-256.png" alt="vue" />

css 代碼：

img {
  width: 100px;
  height: 100px;
  padding:2px;
  /*  --開始object-fit屬性設置--  */
  object-fit: scale-down;
  /*  --結束object-fit屬性設置--  */
  border: 1px dashed #506ee4;
  border-radius: 20px;
}

效果如下：

在線預覽：https://codepen.io/quintiontang/pen/eYWOVKX

9. cursor

你是否覺得瀏覽器提供的鼠標圖形不好看，那么可以使用這個屬性設置你想要的性質，可以是圖片和svg。

<div class="image">image</div>
<div class="svg">svg</div>

css代碼如下：

.image {
  cursor: url("https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png"),auto;
}
.svg {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='40' viewport='0 0 100 100' style='fill:black;font-size:22px;'><text y='50%'>??</text></svg>"),auto;
}

10. caret-color

caret-color 屬性用來定義插入光標（caret）的顏色，插入光標，就是在可編輯器區域內，用來指示用戶的輸入的那個一閃一閃的形似豎杠|的東西。

在線預覽：https://codepen.io/quintiontang/pen/MWmgBgd

11. background-clip

background-clip 屬性定義背景顏色或背景圖像應該超出元素的內邊距的程度，text 是這個屬性是個有意思的值，讓文字變得生動。

html 代碼如下：

<p>DevPoint</p>

css 代碼如下：

p {
  font-family: "Bungee", cursive;
  font-size: 8rem;
  color: transparent;
  font-weight：bolder;
  /* --開始background-clip設置-- */
  background-image: url("https://crayon.devpoint.cn/assets/images/bgs/main.jpg");
  -webkit-background-clip: text;
  background-clip: text;
  /* --結束background-clip設置-- */
  background-size: cover;
  background-position: center;
}

效果如下：

在線預覽：https://codepen.io/quintiontang/pen/bGWbjwm

12. background-repeat

background-repeat 屬性設置圖像填充背景的順序，round 值將圖像均勻地分布在容器的整個寬度上，而space值則在圖像之間添加少量填充：

.repeat div {
  background-repeat: repeat;
}
.round div {
  background-repeat: round;
}
.space div {
  background-repeat: space;
}

效果如下：

在線預覽：https://codepen.io/quintiontang/pen/jOmNpGj

13. ::marker

通常使用 list-style: none 刪除列表標記，并使用 ::before 或 ::after 偽元素添加自定義的標記。現在有一種更簡單的方法可以做到這一點就是使用 ::marker 偽元素。

li::marker {
  content: "? ";
  color: green;
}
li:last-child::marker {
  content: "? ";
  color: red;
}

在線預覽：https://codepen.io/quintiontang/pen/gOWYjzd

14. :target

:target 偽類可以在無需 JavaScript 的情況下創建模態窗口：

.modal {
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in;
}
.modal:target {
  opacity: 1;
  visibility: visible;
}

在線預覽：https://codepen.io/quintiontang/pen/poPzZOv

15. ::selection

::selection 偽元素用來設置文本選擇的樣式。

p::selection {
  background-color: #ff0000;
  color: #fff;
}

在線預覽：https://codepen.io/quintiontang/pen/YzVKjdL

總結

CSS是前端工程師的基本功，如何設計制作出一個交互性強的效果，需要一定的空間思維。對于初學者而言，個人覺得最好的方式就是模仿，找一些交互不錯的網站去模仿。現在瀏覽器基本都支持最新的CSS，未來WEB將會出現令人驚嘆的效果。