關於CSS使用自定義屬性(宣告變數)及運算

2021-10-07 22:51:55 字數 1177 閱讀 4137

在css文件中有時候會多出用到重複的值,使得在前端開發的時候變得繁雜,如果在做乙個大型的專案來說,這不得累死。所以css此文件簡單寫出有關宣告自定義屬性,使用自定義屬性,簡單來說,這種效果和常用程式語言來說是差不多的

自定義屬性是一種css變數,使用過自定義屬性之後可以供整個文件使用這個定義的值。

在css中宣告乙個自定義屬性由"–"(兩個減號)開始

.div

在以上例子中我們使用- -開始定義了乙個自定義屬性color,接著使用var獲取屬性所設定的值並設定為文件中background的值。但是這種方法只能設定於區域性屬性。

:root

.div1

.div2

.div3

從以上**中可以看出,將自定義屬性定義在root類裡面,將課作為整個文件訪問的屬性。

:root

.div1

.div2

.div3

使用calc函式將所運算的值包圍即可,注意在符號前後都需要乙個空格。

函式名描述

attr()

返回選擇元素的屬性值。

calc()

允許計算 css 的屬性值,比如動態計算長度值。

cubic-bezier()

定義了乙個貝塞爾曲線(cubic bezier)。

hsl()

使用色相、飽和度、亮度來定義顏色。

hsla()

使用色相、飽和度、亮度、透明度來定義顏色。

linear-gradient()

建立乙個線性漸變的影象

radial-gradient()

用徑向漸變建立影象。

repeating-linear-gradient()

用重複的線性漸變建立影象。

repeating-radial-gradient()

類似 radial-gradient(),用重複的徑向漸變建立影象。

rgb()

使用紅( r )、綠( g )、藍( b )三個顏色的疊加來生成各式各樣的顏色。

rgba()

使用紅( r )、綠( g )、藍( b )、透明度( a )的疊加來生成各式各樣的顏色。

var()

用於插入自定義的屬性值。

CSS自定義屬性

1.自定義屬性的使用方法 自定義屬性分為 區域性自定義屬性 全域性自定義屬性 使用 宣告自定義屬性 使用兩個 宣告 例如 bg color red 注意這裡有乙個 冒號 這樣就宣告了乙個自定義屬性 bg color 和red 宣告後如何使用 var 自定義屬性名 括號還是要加上兩個 backgrou...

CSS自定義屬性Expression

css的出現使網頁製作者在對網頁元素的控制方便許多,當然,有利必有弊,css只能對顏色 大小 距離等靜態樣式有效,對於要實現某些html元素的動態樣式就顯得有些力不從心。有了css的自定義屬性expression,可以自己定義屬性,自己在屬性裡寫需要的 這樣就可以結合css的特性與js特效,實現對整...

CSS 自定義屬性(變數)

var 函式用來獲取和使用 css 變數 css variables var 複製 語法 root 複製 用途 相容性目前沒有瀏覽器支援,chrome 之前支援後來又移除 參考通過下面的方式來宣告變數 variable name variable value 複製 變數名區分大小寫,變數值可以是顏色...