方法:1、用linear-gradient()实现线性渐变,语法“linear-gradient(角度,起止颜色列表)”;2、用radial-gradient()实现径向渐变,语法“radial-gradient(大小 位置,起止颜色)”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
linear-gradient() 函数--线性渐变
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。
语法:
linear-gradient(direction, color-stop1, color-stop2, ...);
参数:
值 | 描述 |
---|---|
direction | 用角度值指定渐变的方向(或角度)。 |
color-stop1, color-stop2,... | 用于指定渐变的起止颜色。 |
代码示例(考虑浏览器兼容性):
基本线性渐变--自上而下基本线性渐变--45度角
效果图:
值 | 描述 |
---|---|
shape | 确定圆的类型:
|
size | 定义渐变的大小,可能值:
|
position | 定义渐变的位置。可能值:
|
start-color, ..., last-color | 用于指定渐变的起止颜色。 |
示例:
径向渐变 - 形状
椭圆形 Ellipse(默认):
圆形 Circle:
注意: Internet Explorer 9 及之前的版本不支持渐变。
效果图:
径向渐变径向渐变
(学习视频分享:css视频教程)
以上就是css怎么设置渐变的详细内容,更多请关注其它相关文章!