邊框 顏色漸變 過度 2D轉換

2021-09-13 04:11:51 字數 3042 閱讀 3191

邊框陰影box-shadow:x-offset(右)y-offset(下)blur模糊區域spread擴充套件區域color[inset向內][,....];

邊框border-image

(1)邊框資源border-image-source:url()

缺省會將顯示在邊框的四個角

(2)邊框的裁剪border-image-slice

(0 0 0 0遵循上右下左,不要帶單位,切割成九宮格)

(3)邊框的寬度,預設為邊框寬度,border-image-width(一般不寫)

(4)邊框的平鋪border-image-repeat

屬性值:stretch拉伸(預設)repeat重複round縮放後的重複

(5)邊框向外延伸border-image-outset(不能為負值)

線性漸變

background

:linear-gradient

(yellow, blue,pink,#58bc58,...)

;/*預設從上到下漸變*/

background

:linear-gradient

(to right, yellow, blue,pink,#58bc58,...)

;/*從左到右漸變*/

標準的語法(必須放在最後)

對角漸變

background

:-webkit-linear-gradient

(left top, red , blue)

;/* safari 5.1 - 6.0 */

background

:-o-linear-gradient

(bottom right, red, blue)

;/* opera 11.1 - 12.0 */

background

:-moz-linear-gradient

(bottom right, red, blue)

;/* firefox 3.6 - 15 */

background

:linear-gradient

(to bottom right, red , blue)

;

標準的語法(必須放在最後)

角度漸變(新版本旋轉方向正值為順時針,老版本旋轉方向正值為逆時針)

background

:-webkit-linear-gradient

(0deg, red, blue)

;/* safari 5.1 - 6.0 */

background

:-o-linear-gradient

(0deg, red, blue)

;/* opera 11.1 - 12.0 */

background

:-moz-linear-gradient

(0deg, red, blue)

;/* firefox 3.6 - 15 */

background

:linear-gradient

(0deg, red, blue)

;/* 標準的語法(必須放在最後) */

顏色結點(不均勻分布)

background

:linear-gradient

(red 50%, blue 70%,yellow)

;

徑向漸變

background

:-webkit-radial-gradient

(red, green, blue)

;/* safari 5.1 - 6.0 */

background

:-o-radial-gradient

(red, green, blue)

;/* opera 11.6 - 12.0 */

background

:-moz-radial-gradient

(red, green, blue)

;/* firefox 3.6 - 15 */

background

:radial-gradient

(red, green, blue)

;/* 標準的語法 */

顏色(不均勻分布)

shape引數定義了形狀。它可以是值circleellipse。其中,circle表示圓形,ellipse表示橢圓形。預設值是ellipse

重複的徑向漸變

repeating-radial-gradient()函式用於重複徑向漸變

transition-property規定應用過渡的 css 屬性的名稱。

transition-duration定義過渡效果花費的時間。預設是 0。

transition-timing-function規定過渡效果的時間曲線。預設是 「ease」。

transition-delay規定過渡效果何時開始。預設是 0。

translate(x,y)偏移方法

rotate()旋轉方法

scale(x,y)縮放方法

skew(x,y)扭曲方法

CSS3漸變 過渡 2d變換

寫法 一 background gradient linear,起點 水平 垂直 終點,color stop 開始漸變的位置,顏色 注 color stop 開始漸變的位置,顏色 後面可以連著寫多個值。寫法 二 background webkit linear gradient 方向 角度 deg ...

css3 背景 漸變 過渡 2D變換

背景大小 水平 垂直 原點 起始點 background origin border box 以邊框為起始點 background origin content box 以內容為起始點 background origin padding box 以內邊距為起始點 背景裁剪 background cl...

css旋轉45度 css 漸變過渡2D

一 過渡屬性 transition css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過 單擊 獲得焦點或對元素任何改變中觸發,並圓滑地以動畫效果改變css的屬性值 過渡屬性需要觸發事件,如 hover 滑鼠劃過事件 1.transition prop...