文档章节

好程序员web前端教程之CSS3渐变

好程序员IT
 好程序员IT
发布于 05/08 15:36
字数 857
阅读 7
收藏 0

好程序员web前端教程之CSS3渐变,CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

1、线性渐变

语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);说明:direction:默认为to bottom,即从上向下的渐变;
stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。

示例1:to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) } 
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */ 
div { background:linear-gradient(to top, red , blue) }
分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变 

示例2:to right bottom、to right top、to left bottom、to left top

div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); } 
div { background: linear-gradient(to left top, red , blue); }

分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变 

示例3:使用角度渐变

div { background: linear-gradient(10deg, red, blue) } 
 

2、径变

径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变

语法:background: radial-gradient(center, shape, size, start-color, ..., last-color);说明:center:渐变起点的位置,可以为百分比,默认是图形的正中心。
shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。
size:渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边;
farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角

示例1:多颜色点均匀分布

div { background: radial-gradient(red, green, blue); } 
以中心(50% 50%)为起点,到最远角(farthest-corner),从red到green、blue的均匀渐变 


EG:div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 或 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

示例2:多颜色节点不均匀分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); } 

示例3:设置渐变形状

div { background: radial-gradient(circle, red, yellow, green); } 
div { background: radial-gradient(ellipse, red, yellow, green); } 

circle:渐变为最大的圆形; ellipse:根据元素形状渐变,元素为正方形是显示效果与circle无异。

示例4:不同尺寸的渐变

size指定了渐变的大小,即渐变到哪里停止,它有四个值。
closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); } 
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

3、重复渐变

(1)重复性线性渐变

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
说明:10%的位置为yellow,20%的位置为green,然后按照这20%向下重复 

(2)重复性径向渐变

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); } 

© 著作权归作者所有

好程序员IT
粉丝 12
博文 221
码字总数 246690
作品 0
延庆
私信 提问
css3编写浏览器背景渐变背景色

css3编写浏览器背景渐变背景色 知识点:rgb全色循环算法,HEX与RGB颜色转换算法、CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等。 👇源码:...

急速奔跑中的蜗牛
2017/12/06
0
0
程序员2600行代码写个易懂28个纯css3加载loading动画特效

     28个纯css3加载loading动画特效      css3加载loading动画特效      css3加载loading动画特效   写在前面   今日在逛论坛时看到一位程序员共享了他做的一个用纯CSS3加载...

学习web前端
2017/10/23
0
0
从零开始学 Web 之 CSS3(三)渐变,background属性

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/01
0
0
个人分享--web前端学习资源分享

1.前言 时间过得真快,转眼间现在是2017年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享...

2017/12/25
0
0
HTML5开发手机App之:CSS全教程-何韬-专题视频课程

HTML5开发手机App之:CSS全教程—20784人已学习 课程介绍 全面解读CSS2,CSS3以及CSS布局模式等各项知识点,深入系统了解CSS能够实现的各种功能并加以灵活运用。 课程收益 使致力于开发Web前...

pkutao
2016/03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot系列教程JPA之新增记录使用姿势

SpringBoot系列教程JPA之新增记录使用姿势 上一篇文章介绍了如何快速的搭建一个JPA的项目环境,并给出了一个简单的演示demo,接下来我们开始业务教程,也就是我们常说的CURD,接下来进入第一...

小灰灰Blog
36分钟前
4
0
大话文本检测经典模型:Pixel-Anchor

文本检测是深度学习中一项非常重要的应用,在前面的文章中已经介绍过了很多文本检测的方法,包括CTPN(详见文章:大话文本检测经典模型CTPN)、SegLink(详见文章:大话文本检测经典模型Seg...

雪饼
39分钟前
0
0
手把手教你写一个RPC

1.1 RPC 是什么 定义:RPC(Remote Procedure Call Protocol)——远程过程调用协议 ,RPC协议假定某些传输协议的存在,如TCP或UDP,为通信程序之间携带信息数据。在OSI网络通信模型中,RPC...

我最喜欢三大框架
48分钟前
3
0
系统监控-SpringBoot四大神器之Actuator

1. 为什么要使用Actuator来监控SpringBoot项目? 首先之前博客提到过使用JDK自带的JVM监控工具、Psi-Probe Tomcat监控工具以及Javamelody,也提到了Psi-Probe的强大,但是Psi-Probe针对jar包...

秋日芒草
50分钟前
6
0
pip通过setup.py和git仓库安装package

安装setup.py配置文件中的包 进入到setup.py所在目录 pip install -e . 1 安装git仓库中的包 pip install git+git clone 仓库地址.git 1 python代码打包为whl格式 python setup.py bdist_wh...

dillonxiao
52分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部