CSS可以做到嗎？

CSS可以做的驚人事情列表

1。 箱裝飾斷

此CSS屬性指定在跨多行，每列或多個頁面時，如何呈現元素的片段。

2。 ATTR（）

我們可以使用CSS檢索CSS中所選元素的值 ATTR（）。對於可訪問性目的，此方法可能非常有用。

3。 背面能見度

此CSS屬性設置在轉向用戶時元素的背面是否可見。想一下卡片超越UI？

4。 圓錐梯度

漸變是一件很棒的事情。您可能習慣使用線性漸變來設置背景樣式，但是您知道我們可以使用純css來創建餅圖嗎？ 圓錐梯度

為了更好地理解如何 圓錐梯度，參考MDN文檔

5。 過濾

有CSS過濾器時誰需要photoshop過濾器效果。 ?
濾鏡功能將圖形更改應用於輸入圖像的外觀。我們可以達到的效果如下 – 模糊， 亮度， 對比， 灰階， 色相旋轉， 不透明度， 倒置， 烏賊， 飽和， 下拉陰影。

下拉陰影 過濾器非常棒。它允許您將陰影應用於輸入圖像。

6。 混合 - 混合模式

此CSS屬性設置元素的內容應如何與元素的背景或其父元素的內容混合。

通過將混合模式和濾鏡與圖像和文本混合，可以實現驚人的效果。了解有關MDN文檔的更多信息。

7。 首字母

書籍和雜誌中我最喜歡的東西之一就是漂亮的水滴帽。我們可以創建drop 首字母 偽元素。

8。 形狀外

此CSS屬性提供了一種自定義盤點複雜對象周圍的相鄰內聯內容的方法，而不是簡單的矩形框。

在另一個選項卡中打開示例，嘗試更改窗口的寬度，並注意文本如何環繞圖像。

9。 寫作模式

此CSS屬性設置文本行是水平布局還是垂直布局。我們可以擁有這些價值 –

• 水平-TB – 內容從左到右水平流動，從上到下垂直流動。
• 垂直-LR – 內容從左到右水平流動，從上到下垂直流動。
• 垂直-RL – 內容從右向左水平流動，從上到下垂直流動。

查看此示例以查看它的實際效果。

10.向文本添加漸變

這是通過組合實現的 -webkit-background-clip：文本 和 -webkit-text-fill-color：透明 CSS屬性。

11.平滑滾動按鈕

滾動式卡配型 CSS屬性設置如何在滾動容器上應用捕捉點。

此示例顯示垂直（ÿ）滾動值 強制性。 MDN文檔在解釋如何使用其他值時做得很好 接近 和水平滾動（X）。

這些只是CSS可以做的一些好事。可能性無窮無盡 ?