邊框陰影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
引數定義了形狀。它可以是值circle
或ellipse
。其中,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...