CSS3 background 渐变效果一行代码实现

2021-11-2807:36:02网页制作Comments1,708 views字数 1225阅读模式

网站设置背景渐变色,这里看到这一组配色效果还是不错的,于是就将这些脚本记录下来,以后如果有需要的话还可以用到。这实现方法是用到CSS3 background 渐变效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

这里用到的是现行渐变效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

background:linear-gradient

设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

Linear 渐变的类型:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

1、渐变的形式:可选参数 有两种方式-1、设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

2、使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbottom,righttop,rightbottom。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

几个案例样式记录:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);
background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);

最后附带径向渐变的规范和方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

径向渐变:radial-gradient(设置渐变的中心,渐变形状 渐变大小,起始颜色值,中间颜色值 中间颜色位置,终点颜色)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

渐变中心,可选参数,如30px 20px指距离左侧30px距离上侧20px,可以是像素,可以是百分比,也可以是关键字,默认为中心位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

渐变形状,可选参数,可以取值circle或eclipse【默认】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

渐变大小,可循环参数,可以取值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

closest-side:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

指定径向渐变的半径长度为从圆心到离圆心最近的边文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

closest-corner:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

指定径向渐变的半径长度为从圆心到离圆心最近的角文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

farthest-side:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

指定径向渐变的半径长度为从圆心到离圆心最远的边文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

farthest-corner:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

指定径向渐变的半径长度为从圆心到离圆心最远的角文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

contain:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

cover:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner circle farthest-corner圆形渐变,ellipse farthest-corner椭圆渐变。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22716.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/22716.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定