css3的漸變
css3漸變
【由瀏覽器生成進行渲染的】
1.線性漸變：
background:-webkit-linear-gradient(方向,顏色1,顏色2,顏色3，……);
單一方向漸變：
left right top bottom【從 那邊 開始】
注意：需要新增相容字首
to left【到 那邊 結束】
to right
to top
to bottom
注意：不要新增相容字首
通常兩種方式都寫上 相容谷歌火狐 和 不相容
2.對角漸變：
left top 從左上角開始
right bottom 從右下角開始
……以此類推
注意：帶相容字首
to left top 到左上角結束
to right bottom 到右下角結束
……以此類推
注意：不帶相容字首
3.角度漸變
取值【-360deg到360deg】
正值逆時針旋轉 負值順時針 寫在"方向"位置
4.指定顏色分布的百分比，讓顏色按百分比進行漸變
預設顏色趨於均分
[color] 10% 從這個顏色的10%之後開始漸變
(left,blue 10%,yellow 60%,green)
從%多少開始漸變 到下乙個顏色的%多少漸變結束再開始下乙個漸變顏色
[color] 100px 從這個顏色的100px之後開始漸變
5.徑向漸變(一定要加瀏覽器字首)
【從乙個點 到四周的漸變】
background:-webkit-radial-gradient(漸變位置,大小,形狀,顏色1,顏色2,顏色3);
漸變位置：預設從中心到四周
left 從左邊到四周的漸變
right
topbottom
left top 從左上角到四周的漸變
right bottom
……以此類推
10px 30px,顏色，顏色 從左10px上30px到四周的漸變
……以此類推
漸變形狀：
預設橢圓 ellipse【元素是正方形 則是正圓】
正圓 circle
大小：【漸變的大小 即漸變到**停止】
closest-side最近邊
farthest-side最遠邊
closest-corner最近角
farthest-corner最遠角
漸變重複【後面的值要比前面的值大】
線性漸變：
background:repeating-linear-gradient(left,#000 10%,#fff 20%);
徑向漸變：
background:repeating-radial-gradient(left,#000 10%,#fff 20%);
補充：漸變用的背景屬性是 background-image: ；
詳解CSS 3 漸變屬性
css 3中的漸變屬性的支援度具體是 ie10 ff3.6 safari4.0 chrome opera11.1 ios3.2 opera mobile11.1 android，也就是說除了ie10以外其它的瀏覽器已經支援 css3 的漸變屬性了 雖然有些還在使用私有屬性 opera暫不支援徑向漸變...
CSS3顏色漸變
漸變帶來了色彩巨大的展現。可謂不可不學 是故收集整理，權當乙個小教程吧。一 線性漸變在mozilla下的應用 語法 moz linear gradient 引數 其共有三個引數，第乙個引數表示線性漸變的方向，top是從上到下 left是從左到右，如果定義成lefttop，那就是從左上角到右下角。第二...
詳解CSS3漸變
漸變，指形狀或顏色的有規律性的變化，往往可以給人很強的節奏感和審美情趣，這裡研究的主要是顏色的漸變。漸變的形式在日常生活中很常見，在網頁中的用的也很多，傳統網頁技術中往往用來實現漸變，容易帶來載入負擔和動態定製的瓶頸。css3提供了實現漸變的屬性，隨著瀏覽器的逐步支援，研究css3漸變已勢在必行。涉...