css3 漸變,陰影,過渡

2021-09-04 05:37:27 字數 758 閱讀 6678

opacity 透明度,值為0~1,越到1越不透明

rgba(r,g,b,a) rgb分別表示紅綠藍,可用正整數和分數表示,a是alpha透明度,取值0~1。

rgba和opacity透明的不同在於rgba不影響盒子中的字,而opacity連字一起透明。

顏色漸變:linear-gradient(< point >/< angle >,color x%,colorx%…)

repeating-linear-gradient:重複漸變,需設定色標值。

徑向漸變:radial-gradient(circle/ellips at top/left/right/center/bottom,color,color)

盒子陰影效果:box-shadow: h-shadow v-shadow blur spread color inset

h-shadow:必寫,水平陰影的位置,允許負值。

v-shadow:必寫,垂直陰影的位置,允許負值。

blur:模糊距離。

spread:陰影尺寸。

color:陰影顏色。

inset:將外部陰影改為內部陰影。

過渡transition

transition-property:過渡屬性(預設值為all)

transition-duration:過渡持續時間(預設值為0s)

transition-timing-function:過渡函式(預設值為ease函式)

transition-delay:過渡延遲時間(預設值為0s)

css3漸變 倒影 過渡 20160526

漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。linear gradient 線性漸變 向下 向上 向左 向右 對角方向 radial gradient 徑向漸變 由它們的中心定義 語法 background webkit linear radial gradient ...

css3 邊框圓角陰影漸變

css3堅持漸進增強 從被所有瀏覽器支援的基本功能開始,逐步地新增那些只有新式瀏覽器才支援的功能,向頁面新增無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支援時,它們會自動地呈現出來並發揮作用。原則。相對的是優雅降級原則,即是一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。css3中新增特性包括...

css3的漸變 背景 過渡 分頁

知識點一 漸變 線性漸變 background linear gradient red,blue background linear gradient red 10 blue 90 background linear gradient to right,red 10 blue 90 方向 如果不給方...