層疊樣式表 (CSS) 是網(wǎng)頁設(shè)計(jì)的命脈，使開發(fā)人員和設(shè)計(jì)師能夠制作出令人驚嘆的網(wǎng)頁布局效果。 

雖然 CSS 屬性和值是樣式表的構(gòu)建塊，但 通過引入CSS 函數(shù)，未來我們可以實(shí)現(xiàn)更多CSS設(shè)計(jì)的游戲。 

在今天這篇文章中，我們將分享20 個(gè)基本的 CSS 函數(shù)，探索它們的功能、實(shí)際應(yīng)用程序、最佳實(shí)踐和常見陷阱。

1. rgba()：重新定義顏色

功能：rgba（紅、綠、藍(lán)、alpha）

rgba() 函數(shù)使您能夠精確定義顏色，包括 alpha（透明度）值。它非常適合創(chuàng)建半透明或半透明顏色。

例子：

background-color: rgba(255, 0, 0, 0.5); /* Red with 50% transparency */

2. hsl()：掌握顏色變化

函數(shù)：hsl(色調(diào)、飽和度、亮度)

使用 hsl()，我們可以對(duì)顏色進(jìn)行更精準(zhǔn)細(xì)致的控制，允許你指定色調(diào)、飽和度和亮度值。此功能可以幫助我們制作迷人顏色變化的調(diào)色板。

例子：

background-color: hsl(120, 100%, 50%); /* A shade of green */

3. var()：具有自定義屬性的動(dòng)態(tài)樣式

函數(shù)：var(--變量名)

var() 函數(shù)與自定義屬性（CSS 變量）配合使用，可以通過引用變量值來啟用動(dòng)態(tài)樣式。它確保你風(fēng)格的一致性和靈活性。

例子：

:root {
  --primary-color: blue;
}
color: var(--primary-color); /* Utilizing the custom property */

4. calc()：讓響應(yīng)式布局變得簡(jiǎn)單

函數(shù)：calc（表達(dá)式）

使用 calc() 可以輕松實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。它允許你在樣式屬性內(nèi)執(zhí)行計(jì)算，非常適合根據(jù)屏幕尺寸調(diào)整布局。

例子：

width: calc(50% - 20px); /* Responsive width calculation */

5.rotate()：動(dòng)畫變換

功能：ratate（角度）

使用rotate() 函數(shù)創(chuàng)建令人著迷的動(dòng)畫，該函數(shù)將元素旋轉(zhuǎn)指定的角度。

例子：

transform: rotate(45deg); /* Element rotation by 45 degrees */

6.scale()：放大或縮小元素

功能：scale（因子）

使用scale()按比例縮放元素是輕而易舉的事。使用它來實(shí)現(xiàn)縮放效果和流暢的動(dòng)畫。

例子：

transform: scale(2); /* Element scaled to double its size */

7.translate()：輕松的元素移動(dòng)

函數(shù)：translate（x，y）

使用translate() 實(shí)現(xiàn)流體元素運(yùn)動(dòng)。它水平和垂直移動(dòng)元素，非常適合動(dòng)畫和過渡。

例子：

transform: translate(20px, 10px); /* Translate right by 20px and down by 10px */

8.rotateX()、rotateY()、rotateZ()：3D 變換

函數(shù)：rotateX(角度)、rotateY(角度)、rotateZ(角度)

使用這些功能解鎖 3D 變換的世界。它們可以實(shí)現(xiàn)復(fù)雜的空間操作。

例子：

transform: rotateX(45deg); /* Rotate around the X-axis */

9. skew()：藝術(shù)元素扭曲

功能：skew()（x 角度，y 角度）

使用 skew() 創(chuàng)造性地扭曲元素。它非常適合實(shí)現(xiàn)獨(dú)特的設(shè)計(jì)效果。

例子：

transform: skew(30deg, 20deg); /* Horizontal skew by 30deg and vertical skew by 20deg */

10.blur()：柔焦和背景模糊

功能：blur（半徑）

使用blur() 對(duì)元素應(yīng)用柔焦或背景模糊效果。這是增強(qiáng)視覺吸引力的必要條件。

例子：

filter: blur(5px); /* Apply a 5px blur effect */

11.brightness()：動(dòng)態(tài)亮度控制

功能：brightness（系數(shù)）

使用 Brightness() 動(dòng)態(tài)控制元素的亮度。它是創(chuàng)建淺色和深色主題的絕佳工具。

例子：

filter: brightness(150%); /* Increase brightness by 50% */

12.contrast()：微調(diào)視覺清晰度

功能：contrast（因子）

通過使用contrast()調(diào)整元素的對(duì)比度來增強(qiáng)或降低可見性。

例子：

filter: contrast(150%); /* Increase contrast by 50% */

13. saturate()：增強(qiáng)顏色鮮艷度

功能：saturate（因子）

通過使用 saturate() 函數(shù)放大或降低飽和度來控制顏色鮮艷度。

例子：

filter: saturate(200%); /* Double the saturation */

14. invert()：藝術(shù)色彩反轉(zhuǎn)

函數(shù)：invert（因子）

使用 invert() 創(chuàng)建引人注目的顏色反轉(zhuǎn)。它非常適合獨(dú)特的設(shè)計(jì)元素。

例子：

filter: invert(1); /* Invert colors */

15. drop-shadow()：提升視覺層次

函數(shù)：drop-shadow(h-陰影 v-陰影模糊-半徑擴(kuò)散-半徑顏色)

使用 drop-shadow() 函數(shù)為元素添加深度和視覺層次結(jié)構(gòu)。它改變了 UI 設(shè)計(jì)的游戲規(guī)則。

例子：

box-shadow: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2)); /* Apply a drop shadow */

16.translateX()、translateY()、translateZ()：3D元素平移

函數(shù)：translateX(距離)、translateY(距離)、translateZ(距離)

通過沿特定軸平移元素來導(dǎo)航三維空間。

例子：

transform: translateX(20px); /* Translate along the X-axis */

17. url()：鏈接到外部資源

函數(shù)：url(路徑)

url() 函數(shù)是鏈接到圖像或字體等外部資源的網(wǎng)關(guān)。

例子：

backg
round-image: url('image.jpg'); /* Use an image as a background */

18. Linear-gradient()：制作令人驚嘆的漸變

函數(shù)：Linear-gradient（方向，color-stop1，color-stop2，...）

使用 Linear-gradient() 創(chuàng)建令人著迷的線性漸變。它非常適合背景和基于漸變的設(shè)計(jì)。

例子：

background: linear-gradient(to right, red, blue); /* Create a horizontal gradient */

19. Radial-gradient()：迷人的圓形漸變

函數(shù)：Radial-gradient（形狀，位置，顏色停止1，顏色停止2，...）

對(duì)于圓形漸變，radial-gradient() 是您的首選函數(shù)。它非常適合按鈕和裝飾元素。

例子：

background: radial-gradient(circle, red, blue); /* Create a radial gradient */

20. attr()：訪問 HTML 屬性

函數(shù)：attr(屬性)

attr() 函數(shù)允許您訪問 HTML 屬性并在樣式中使用它們的值，使您的設(shè)計(jì)成為數(shù)據(jù)驅(qū)動(dòng)的。

例子：

color: attr(data-color);

實(shí)際應(yīng)用

現(xiàn)在我們已經(jīng)探索了這些 CSS 函數(shù)，讓我們深入了解它們發(fā)揮作用的現(xiàn)實(shí)場(chǎng)景：

1).響應(yīng)式設(shè)計(jì)

諸如 calc() 和 var() 之類的函數(shù)對(duì)于創(chuàng)建響應(yīng)式布局至關(guān)重要。我們可以根據(jù)屏幕尺寸和用戶偏好動(dòng)態(tài)調(diào)整寬度、高度和顏色。

width: calc(50% - 20px); /* Responsive width calculation */

2). 動(dòng)畫和過渡

轉(zhuǎn)換函數(shù)（rotate()、scale()、translate()）在動(dòng)畫和過渡中起著至關(guān)重要的作用。它們?cè)试S我們創(chuàng)建引人入勝的交互式用戶界面。

transform: rotate(45deg); /* Animation rotation effect */

3). 圖像效果

諸如blur()、brightness()和contrast()之類的函數(shù)，我們能夠應(yīng)用各種圖像效果，使圖像在視覺上更具吸引力。

filter: blur(5px); /* Apply a blur effect to images */

4).動(dòng)態(tài)主題

CSS 函數(shù)可用于創(chuàng)建動(dòng)態(tài)主題，其中顏色、亮度和對(duì)比度級(jí)別根據(jù)用戶偏好而變化。

filter: brightness(150%); /* Increase brightness for a light theme */

5).漸變背景

Linear-gradient() 和 Radial-gradient() 函數(shù)非常適合為我們的 Web 元素創(chuàng)建時(shí)尚的漸變背景。

background: linear-gradient(to right, red, blue); /* Gradient background */

通過下面的代碼，我們查看所有這些函數(shù)的運(yùn)行情況。

    
    
    
    


    
    
20 CSS Functions Explained


    
    
1. Redefining Colors with rgba()
    



    
    
2. Mastering Color Variations with hsl()
    



    
    
3. Dynamic Styling with Custom Properties using var()
    
Styling


    
    
4. Responsive Layouts Made Easy with calc()
    



    
    
5. Animating Transformations with rotate()
    



    
    
6. Magnify or Shrink Elements with scale()
    



    
    
7. Loading External Resources with url()
    



    
    
8. Creating Linear Gradients with linear-gradient()
    



    
    
9. Creating Radial Gradients with radial-gradient()
    



    
    
10. Accessing HTML Attributes with attr()
    



    
    
11. Creating Counters with counter()
    



    
    
12. Calculating the Minimum Value with min()
    
Responsive Font Size (min)


    
    
13. Calculating the Maximum Value with max()
    
Responsive Font Size (max)


    
    
14. Restricting Values with clamp()
    
Responsive Font Size (clamp)


    
    
15. Repeating Elements with repeat()
    

        
1
        
2
        
3
    


    
    
16. Selecting Elements to Exclude with not()
    

        
Special Paragraph
        
Regular Paragraph 1
        
Regular Paragraph 2
    


    
    
17. Language-Based Styling with lang()
    
English Language


    
    
18. Selecting Child Elements with nth-child()
    

        
Paragraph 1
        
Paragraph 2
        
Paragraph 3
    


    
    
19. Styling Parent of Focused Element with :focus-within
    

        

            
        
    


    
    
20. Styling Empty Elements with :empty
    

        
Non-Empty Paragraph
        

    

最佳實(shí)踐和陷阱

最佳實(shí)踐：

• 謹(jǐn)慎使用函數(shù)。雖然 CSS 函數(shù)很強(qiáng)大，但請(qǐng)避免過度使用，因?yàn)樗鼤?huì)使樣式表更難以閱讀和維護(hù)。
• 測(cè)試跨瀏覽器兼容性。確保功能在各種瀏覽器中按預(yù)期工作，尤其是可能不支持所有功能的舊瀏覽器。
• 優(yōu)化性能。復(fù)雜的函數(shù)，尤其是動(dòng)畫中的函數(shù)，可能會(huì)影響渲染性能。根據(jù)需要分析和優(yōu)化您的樣式。

常見陷阱：

• 過于復(fù)雜的表達(dá)式。過于復(fù)雜的函數(shù)表達(dá)式可能會(huì)導(dǎo)致樣式混亂和錯(cuò)誤。保持代碼整潔有序。
• 瀏覽器支持。舊版瀏覽器可能不支持某些功能，因此請(qǐng)注意兼容性問題并考慮后備方案。
• 性能下降。過度使用函數(shù)，尤其是在動(dòng)畫中，可能會(huì)導(dǎo)致性能瓶頸。在各種設(shè)備上進(jìn)行測(cè)試，以確保流暢的用戶體驗(yàn)。

寫在最后

CSS 函數(shù)是很強(qiáng)大的工具，可以為我們的網(wǎng)頁設(shè)計(jì)增添活力、創(chuàng)造力和多種布局。我們通過了解它們的功能與特性，幫助我們明智的選擇在何種情況下使用它們，并遵循最佳實(shí)踐。

分享標(biāo)題：20個(gè)CSS函數(shù)，釋放你的創(chuàng)造力
轉(zhuǎn)載注明：http://uogjgqi.cn/article/coggeie.html