CSS3:linear-gradient,线性渐变的使用方法
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
本文只讲述表准的语法,要想兼容更多浏览器可以到网上搜索出很多解决方案,逻辑基本一致。
1.语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction:默认为to bottom,即从上向下的渐变;
stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。
2.示例: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) }
分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变,效果如下图:
3.示例:to right bottom、top right top、top left bottom、top 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); }
分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变,效果如下图:
注意:top right bottom和top bottom right是等同的
4.使用角度
div { background: linear-gradient(10deg, red, blue) }
效果如下图:
5.多个渐变点
5.1 多个渐变点默认均匀分布
div { background: linear-gradient(to right, red, blue, green) }
理论上渐变点数目不受限制,实际效果如下图:
5.2 多个渐变点不均匀分布
div { background: linear-gradient(red 5%, green 15%, blue 60%) }
6.重复性渐变
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
10%的位置为yellow,20%的位置为green,然后按照这20%向下重复,效果如下图:
7.使用rgba
div { background:linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0)) }
从红色的不透明,到全透明的渐变,效果图如下:
参考文章:CSS3 渐变(Gradients)、CSS3 Gradient_gradient, css3属性详解
CSS3:linear-gradient,线性渐变的使用方法相关推荐
- -webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
webkit内核的safari. Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari. Chrome的Linear Gradients (线 ...
- html语言加号点一下变成减号6,CSS3 linear-gradient线性渐变生成加号和减号的方法...
在商城项目中,购物车是一个很重要的功能.其中最常见的是购物车中对库存的"+-"操作,包括抢购后面有很多算法.但是作为前端来说,购物车的结算中的+-就是一个计算而已.传统的实现方式是 ...
- html给文字添加波浪线,使用CSS3线性渐变(linear-gradient)实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
- 波浪形状html,使用CSS3线性渐变(linear-gradient)实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
- CSS应用:线性渐变
渐变是从一种颜色逐渐蜕变到另一种颜色.线性渐变就是沿着一根轴线(水平.垂直或某个角度)改变颜色,从起点到终点颜色进行顺序渐变. 在这里,我将介绍在CSS中怎么实现线性渐变的方法. 线性渐变 创建线性渐 ...
- html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
css3设置边框颜色渐变的方法有哪些 发布时间:2020-09-14 14:51:54 来源:亿速云 阅读:110 作者:小新 css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经 ...
- 16.SVG线性渐变(Linear Gradient)
SVG 渐变 和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变.渐变方式有两种:线性和径向. SVG 线性渐变 - linearGradie ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
最新文章
- AR行业成本拆解解析
- USB开发基础:USB设备的开发流程
- Spring 系列,第 3 部分: 进入 Spring MVC
- 视频预测领域有哪些最新研究进展?不妨看看这几篇顶会论文
- 修改了模板文件tpl如何立即生效_Views视图与模板
- Backup--查看备份还原需要的空间
- IOS Socket 01-网络协议基础知识
- Don't Make Me Think
- java jmx 监控_利用VisualVm和JMX远程监控Java进程
- RabbitMQ 线上事故!慌的一批,脑袋一片空白……
- PHP字符串作为字节数组,哈希hash然后base64编码
- 写一个彩票程序:30选7。
- 计算机一级考试自测题,计算机一级B考试自测题
- 12个优秀的 HTML5 网站设计案例欣赏
- 手机通讯录html模板,手机通讯录导模板
- 用Python+PIL将多个jpg图像批量合并成一个pdf文件
- CameraRaw升级
- 如何使用Python解锁星河远征军的科幻旅途
- 神来之笔--图解JVM内存分配及对象存储
- balsamiq mockups 3.0破解教程
热门文章
- boost::gil::static_transform用法的测试程序
- ITK:单相Chan和Vese密集域水平集分割
- ITK:计算CovariantVector的范数并将其标准化
- VTK:可视化之HanoiInitial
- VTK:Utilities之RenderScalarToFloatBuffer
- VTK:Math之LeastSquares
- OpenCV视频加速Video acceleration的实例(附完整代码)
- Qmake变量variable
- C语言用‘%20‘替换字符串中的所有空格的算法(附完整源码)
- C++实现顺序查找(附完整源码)