CSS3漸變效果

2022-08-17 16:51:16 字數 867 閱讀 1007

一.線性漸變linear-gradient

1.使用方法：

background:-webkit-linear-gradient(red,blue);


background:-moz-linear-gradient(red,blue);


background:linear-gradient(red,blue);


2.拓展應用


光斑：
二.徑向漸變radial-gradient1.使用方法：

background:-webkit-radial-gradient(red,blue);


background:-webkit-radial-gradient(100px 50px,circle,red,blue);  //


形狀： ellipse、circle或者


具體數值或百分比，也可以是關鍵字（最近端，最近角，最遠端，最遠角，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）; 


firefox目前只支援關鍵字


三.相容問題




 
CSS3漸變效果
css3提供了linear gradient屬性實現背景顏色的漸變功能。在以前，這種效果必須採用才能實現的。方位可選引數，漸變的方位。可以使用的值有 to top to top right to right to bottom to bottom left to left to top left。起...


CSS3中漸變效果
1.線性漸變 a 從左到右漸變 div nth child 1 b 不指定方向預設是從上到下 div nth child 2 c 按照指定角度 div nth child 3 d 斑馬線漸變 2.頸項漸變 radial gradient 輻射半徑，中心的位置，起始顏色，終止顏色 中心點位置 at l...


CSS3 設定漸變效果
值 說明to top 從下到上漸變 to bottom 從上到下漸變 to left 從右到左漸變 to right 從左到右漸變 to top left 從右下方到左上方漸變 to top right 從左下方到右上方漸變 to bottom left 從右上方到左下方漸變 to bottom r...