本文摘自PHP中文网,作者V,侵删。
css3实现颜色渐变效果的方法:可以利用linear-gradient函数和radial-gradient函数分别实现线性渐变效果和径向渐变效果,如【linear-gradient(yellow, green)】。
css3渐变有两种类型:css3线性渐变和css3径向渐变。
(学习视频分享:css视频教程)
一、线性渐变颜色渐变
函数:
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
语法:
1 | background-image : linear-gradient(direction, color-stop 1 , color-stop 2 , ...);
|
值:
direction 用角度值指定渐变的方向(或角度)。
color-stop1, color-stop2,... 用于指定渐变的起止颜色。
举例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >php中文网</ title >
< style >
#grad1{
height: 200px;
background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
background: linear-gradient(yellow, green)); /* 标准的语法(必须放在最后) */
}
</ style >
</ head >
< body >
< h3 >线性渐变 - 从上到下</ h3 >
< div id = "grad1" ></ div >
</ body >
</ html >
|
二、径向渐变
函数;
radial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中心点定义。
为了创建径向渐变你必须设置两个终止色。
语法:
1 | background-image : radial-gradient(shape size at position, start-color, ..., last-color);
|
值:
1、shape 确定圆的类型
2、size 定义渐变的大小,可能值:
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边
3、position 定义渐变的位置。可能值:
4、start-color, ..., last-color 用于指定渐变的起止颜色。
举例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >php中文网</ title >
< style >
#grad1{
height: 150px;
width: 200px;
background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
background: radial-gradient(orange, yellow, pink); /* 标准的语法(必须放在最后) */
}
</ style >
</ head >
< body >
< h3 >径向渐变</ h3 >
< div id = "grad1" ></ div >
</ body >
</ html >
|
相关推荐:CSS教程
以上就是css3如何实现颜色渐变效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
CSS3有那些内置函数
CSS3如何实现聊天气泡效果?(代码示例)
animation-fill-mode属性怎么用
html5和CSS3 动态气泡按钮的实现
谷歌浏览器不支持CSS3吗
在线演示一个全屏切换效果实例
CSS3中box-sizing属性的解析(附代码)
transform-style属性怎么用
CSS3 animation属性怎么用
overflow-y属性怎么用
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css3如何实现颜色渐变效果