css3渐变(gradient)

css3渐变(gradient)
css3的内容各种格式五花八门都需要各种代码的进行组构,这次我就带大家重新巩固下css3的渐变,一起学习,一起进步。
概念:CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。可以使得渐变效果完美显示。
css3渐变也分为两种,接下来咱们一起去了解进行认知:
1、线性渐变;
线性渐变语法:background-image:linear-gradient(direction, color-stop1, color-stop2, …);
线性渐变说明:direction(表示渐变效果是从什么位置开始的渐变)
1)、to bottom(默认效果;即自上到下的渐变)如图示:
background-image: linear-gradient(to bottom,red,blue);
在这里插入图片描述
2)、to bottom right(默认效果;即自左上角到右下角的渐变)如图示:
background-image: linear-gradient(to bottom right,red,blue);
在这里插入图片描述
从左到右、从右到左、从下到上等等的各种渐变都是依从上面所述的规律显示。
2、径向渐变;
径向渐变语法:background-image: radial-gradient(shape size at position, start-color, …, last-color);
说明:position:渐变起点的位置,可以为百分比,默认是图形的正中心。
shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。
size:渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角。
示例:background-image:-webkit-radial-gradient(40%50%, closest-corner,red,blue);}
40%50%表示径向渐变的中心点,40%定位其水平位置,50%定位其垂直位置;
closest-corner表示渐变大小;
red代表渐变开始颜色,blue代表渐变结束颜色;
示图:
在这里插入图片描述
上面就是小亮在逆战班中学到的一些关于css3渐变的知识了
学海无涯,各位加油

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值