html中怎样写渐变色代码,纯css简单几行代码实现颜色渐变效果 非常漂亮
線性漸變的實例：
線性漸變 - 從上到下(默認情況下)
下面的實例演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：
www.sinmeng.net#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標準的語法(必須放在最后) */
}
線性漸變 - 從上到下
從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：
注意： Internet Explorer 9 及之前的版本不支持漸變。
線性漸變 - 從左到右
下面的實例演示了從左邊開始的線性漸變。起點是紅色，慢慢過渡到藍色：
www.sinmeng.net#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 標準的語法(必須放在最后) */
}
線性漸變 - 從左到右
從左邊開始的線性漸變。起點是紅色，慢慢過渡到藍色：
注意： Internet Explorer 9 及之前的版本不支持漸變。
線性漸變 - 對角
你可以通過指定水平和垂直的起始位置來制作一個對角漸變。
下面的實例演示了從左上角開始(到右下角)的線性漸變。起點是紅色，慢慢過渡到藍色：
www.sinmeng.net#grad1 {
height: 200px;
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); /* 標準的語法(必須放在最后) */
}
線性漸變 - 對角
從左上角開始(到右下角)的線性漸變。起點是紅色，慢慢過渡到藍色：
注意： Internet Explorer 9 及之前的版本不支持漸變。
帶有指定的角度的線性漸變：
www.sinmeng.net#grad1 {
height: 100px;
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); /* 標準的語法(必須放在最后) */
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(90deg, red, blue); /* 標準的語法(必須放在最后) */
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 標準的語法(必須放在最后) */
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(-90deg, red, blue); /* 標準的語法(必須放在最后) */
}
線性漸變 - 使用不同的角度
0deg90deg180deg-90deg注意： Internet Explorer 9 及之前的版本不支持漸變。
使用多個顏色結點
www.sinmeng.net#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 標準的語法(必須放在最后) */
}
#grad2 {
height: 200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 標準的語法(必須放在最后) */
}
#grad3 {
height: 200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* 標準的語法(必須放在最后) */
}
3 個顏色結點(均勻分布)
7 個顏色結點(均勻分布)
3 個顏色結點(不均勻分布)
注意： 當未指定百分比時，顏色結點不會自動均勻分布。
注意： Internet Explorer 9 及之前的版本不支持漸變。
下面的實例演示了如何設置多個顏色結點：
下面的實例演示了如何創(chuàng)建一個帶有彩虹顏色和文本的線性漸變：
www.sinmeng.net#grad1 {
height: 55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 標準的語法(必須放在最后) */
}
漸變背景
注意： Internet Explorer 9 及之前的版本不支持漸變。
使用透明度(transparent)
下面的實例演示了從左邊開始的線性漸變。起點是完全透明，慢慢過渡到完全不透明的紅色：
www.sinmeng.net#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法(必須放在最后) */
}
線性漸變 - 透明度
為了添加透明度，我們使用 rgba() 函數(shù)來定義顏色結點。rgba() 函數(shù)中的最后一個參數(shù)可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。
注意： Internet Explorer 9 及之前的版本不支持漸變。
重復的線性漸變
repeating-linear-gradient() 函數(shù)用于重復線性漸變：
www.sinmeng.net#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 標準的語法(必須放在最后) */
}
重復的線性漸變
注意： Internet Explorer 9 及之前的版本不支持漸變。
CSS3 徑向漸變
徑向漸變由它的中心定義。
為了創(chuàng)建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以指定漸變的中心、形狀(原型或橢圓形)、大小。默認情況下，漸變的中心是 center(表示在中心點)，漸變的形狀是 ellipse(表示橢圓形)，漸變的大小是 farthest-corner(表示到最遠的角落)。
徑向漸變的實例：
徑向漸變 - 顏色結點均勻分布(默認情況下)
www.sinmeng.net#grad1 {
height: 150px;
width: 200px;
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); /* 標準的語法(必須放在最后) */
}
徑向漸變 - 顏色結點均勻分布
注意： Internet Explorer 9 及之前的版本不支持漸變。
徑向漸變 - 顏色結點不均勻分布
www.sinmeng.net#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法(必須放在最后) */
}
徑向漸變 - 顏色結點不均勻分布
注意： Internet Explorer 9 及之前的版本不支持漸變。
設置形狀
shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。
形狀為圓形的徑向漸變
www.sinmeng.net#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(red, yellow, green); /* 標準的語法(必須放在最后) */
}
#grad2 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 標準的語法(必須放在最后) */
}
徑向漸變 - 形狀
橢圓形 Ellipse(默認)：
圓形 Circle：
注意： Internet Explorer 9 及之前的版本不支持漸變。
不同尺寸大小關鍵字的使用
size 參數(shù)定義了漸變的大小。它可以是以下四個值：
closest-side
farthest-side
closest-corner
farthest-corner
?
www.sinmeng.net#grad1 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 標準的語法(必須放在最后) */
}
#grad2 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 標準的語法(必須放在最后) */
}
#grad3 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 標準的語法(必須放在最后) */
}
#grad4 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 標準的語法(必須放在最后) */
}
徑向漸變 - 不同尺寸大小關鍵字的使用
closest-side：
farthest-side：
closest-corner：
farthest-corner(默認)：
注意： Internet Explorer 9 及之前的版本不支持漸變。
重復的徑向漸變
repeating-radial-gradient() 函數(shù)用于重復徑向漸變：
www.sinmeng.net#grad1 {
height: 150px;
width: 200px;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 標準的語法(必須放在最后) */
}
重復的徑向漸變
注意： Internet Explorer 9 及之前的版本不支持漸變。
總結
以上是生活随笔為你收集整理的html中怎样写渐变色代码,纯css简单几行代码实现颜色渐变效果 非常漂亮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一摞烙饼
- 下一篇： 成大事，你一定需要经历的二次跃升