CSS3渐变学习笔记

渐变包括线性渐变、径向渐变,使用的是background属性或者background-image属性

!!!!!颜色至少两种

1、linear-gradient()函数

(1)语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...,color-stopn);
background-image: linear-gradient(angle, color-stop1, color-stop2);

参数:
direction::渐变方向,非必填,默认值为从上到下,可选值可为(to left、to right、to top、to left right、to bottom right...)

 angle:渐变角度(水平线和渐变线之间的角度,逆时针方向计算,默认为180deg),非必填
 color-stop1::起始颜色,可选值为所有颜色,包括rgba()表示的颜色
 color-stopn::终止颜色,可选值为所有颜色,包括rgba()表示的颜色

角度:

(2)linear-gradient用于创建一个表示两种及以上颜色线性渐变的图片

(3)可以实现不同方向的渐变效果,指定为一个角度,默认为从上到下

(4)实例

默认:从上到下

<style>
    .box{
        width: 200px;
        height: 200px;
        background-image: linear-gradient(#fff,#ff0,#f9f);
    }
</style>
<body>
    <div class="box">
    </div>
</body>

从左到右

.box{
      width: 200px;
      height: 200px;
      background-image: linear-gradient(to right,#fff,#ff0,#f9f);
  }

从左到右,完全透明过度到完全不透明的红色

.box{
      width: 200px;
      height: 200px;
      background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  }

渐变轴设为45度后

.box{
      width: 200px;
      height: 200px;
      background-image: linear-gradient(45deg,#fff,#ff0,#f9f);
}

渐变轴从右下到左上

.box{
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to left top,#fff,#ff0,#f9f);
}

从白色#fff开始渐变,到线性渐变方向50%的位置#fff渐变完成#ff0,此时#ff0开始渐变,最后以#f9f结束

.box{
      width: 200px;
      height: 200px;
      background-image: linear-gradient(#fff,#ff0 50%,#f9f);
  }

2、repeating-linear-gradient()函数

(1)语法

语法与linear-gradient()一致

(2)repeating-linear-gradient()函数用于创建重复的线性渐变图像

(3)实例

.box{
      width: 200px;
      height: 200px;
      background-image: repeating-linear-gradient( #fff 10%,#ff0 20%,#f9f 30%);
  }

3、radial-gradient()函数

(1)语法

background-image:radial-gradient(shape size at position,start-color,...,last-color);
参数:
shape:渐变的形状(圆的类型),默认值为:ellipse,椭圆形径向渐变;可选值:circle,圆形的径向渐变
size:渐变的大小,默认值为:farthest-corner,指定径向渐变的半径长度为从圆心到离圆心最远的角;
			可选值:closest-side:从圆心到离圆心最近的边;closest-corner:圆心到离圆心最近的角;farthest-side:从圆心到离圆心最远的边
position:渐变的位置,默认值为:center,设置中间为径向渐变圆心的纵坐标值;可选值:top,顶部;bottom,底部;
start-color,...,last-color:指定渐变的起止颜色           

(2)radial-gradient()函数用于创建径向渐变的图像

(3)实例

三种颜色均匀分布

.box{
      width: 200px;
      height: 200px;
      background-image: radial-gradient(#fff,#ff0,#f9f);
  }

三种颜色不均匀分布

.box{
      width: 200px;
      height: 150px;
      background-image: radial-gradient(#fff 5%,#ff0 25%,#f9f 80%);
  }

渐变形状为圆形

.box{
      width: 200px;
      height: 150px;
      background-image: radial-gradient(circle,#fff,#ff0,#f9f);
  }

不同尺寸大小的径向渐变

<style>
    .box{
        width: 600px;
        height: 150px;
        background-image: radial-gradient(farthest-side at 80% 55%,#fff,#ff0,#f9f);
    }
    .box1{
        margin-top: 20px;
        width: 600px;
        height: 150px;
        background-image: radial-gradient(#fff,#ff0,#f9f);
    }
</style>
<body>
  <div class="box">
  </div>
  <div class="box1">
  </div>
</body>

重复的径向渐变

<style>
    .box{
        width: 200px;
        height: 150px;
        background-image: repeating-radial-gradient(#fff,#ff0 10%,#f9f 20%);
    }
</style>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值