css 彩虹色渐变色,纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)...
下面我们来看看CSS渐变色(Gradients)技术基本的语法,浏览器支持情况和缺陷。
CSS渐变色(Gradients)术语和解释
CSS渐变色(Gradients)能让我们用一种颜色渐变的效果修饰一个空间——从一种颜色过渡到另外一种颜色——填充这个空间。渐变色有两个形式:linear (线性渐变) 和 radial (环形渐变)。很显然CSS渐变色(Gradients)技术是产生了一种视觉图案效果,而实现这种视觉效果很简单,能通过简单编程实现。CSS3里很早就引入了CSS渐变色(Gradients),但这种技术的推广却经历了很长时间。
CSS颜色线性渐变的语法
CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同,但最后是统一标准的:
background-image: linear-gradient( || ,]? , [, ]*)
第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比:
/* color-stop(percentage/amount, color) */
color-stop(0.20, red)
因为CSS渐变色(Gradients)技术是CSS3里比较新的技术,属于高级的CSS功能,于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器,就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况:
#example1 {
/* 底色 */
background-color: #063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
/* firefox; multiple color stops */
background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
/* ie10 */
background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
/* opera 11.1 */
background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
/* 标准写法 */
background-image: linear-gradient(#063053, #395873, #5c7c99);
}
注意,我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向,而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它:
#example2 {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
/* ie10 */
background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
/* opera 11.1 */
background-image: -o-linear-gradient(45deg, #063053, #395873);
/* The "standard" */
background-image: linear-gradient(45deg, #063053, #395873);
}
我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变?下面我们来做一个彩虹:
/* example 3 - linear rainbow */
#example3 {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
/* ie10 */
background-image: -ms-linear-gradient(red, green, blue, purple, orange);
/* opera 11.1 */
background-image: -o-linear-gradient(red, green, blue, purple, orange);
/* The "standard" */
background-image: linear-gradient(red, green, blue, purple, orange);
}
关于IE对CSS颜色渐变技术的支持做一些说明:在早期IE是使用filter和-ms-filter语法实现渐变色,而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题:
不是很理想,但这对设计一个网站很重要。
CSS环形颜色渐变(Radial Gradients)
CSS环形颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样,它不是沿着一个方向渐变,而是以一个点为中心,向四周辐射渐变,360度的。目前除了IE外的所有浏览器都支持CSS环形颜色渐变(Radial Gradients),但它们也都有各自不同的语法…..我说的就是你,WebKit引擎的浏览器,WebKit曾经彻底修改了它的CSS环形颜色渐变(Radial Gradients)的语法。下面我们来看看老式的写法:
/* basic */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));
/* color stops */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
而现在WebKit(主要代表是谷歌浏览器)里的新语法跟火狐浏览器的完全一致了:
radial-gradient( [ || ,]? [ || ,]? , [, ]*)
这种环形颜色渐变语法是最新的火狐和谷歌浏览器使用语法。还有一些常量可以使用在这种渐变技术中来设定渐变环形的大小:
closest-side: 对于原型,是指渐变图形扩散时需要到达的最近的一个边。对于椭圆,是指横向或纵向中要达到最近的一个边。
closest-corner: 是指渐变图形扩散时需要到达的最近的一个角
farthest-side: 跟 closest-side 相似,但到达到的是最远的一个边。
farthest-corner: 是指渐变图形扩散时需要到达的最远的一个角
contain: closest-side的同义词.
cover: farthest-corner的同义词
环形颜色渐变(Radial Gradients)的一个基本的用法是这样的:
#example4 {
background-image: -moz-radial-gradient(orange, red);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
background-image: -webkit-radial-gradient(orange, red); /* new syntax */
background-image: radial-gradient(orange, red);
}
上面的例子没有设定位置和大小——只有两个颜色停止点。实际是可以使用无数颜色,就像下面我们制作的彩虹:
#example5 {
background-image: -moz-radial-gradient(red,green,blue,purple,orange);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */
background-image: radial-gradient(red, green, blue, purple, orange);
}
我们实现一个更复杂的,加上位置信息和更多的颜色停止点:
#example6 {
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
注意上面使用的颜色写法和长度的单位。是事实上你可以使用任何颜色写法或长度单位。
CSS颜色渐变(Gradients)的技巧和提示
CSS颜色渐变(Gradients)技术很有价值,但有时很难实现。有时你已经实现了想要的渐变,而浏览器的支持也会成为一个问题。下面是一些使用CSS颜色渐变(Gradients)的建议:
想让你的CSS颜色渐变(Gradients)表现一定的透明度?使用 rgba 颜色。
使用背景色垫底,这样防止当浏览器不支持时不注意没有任何颜色。
火狐浏览器和谷歌浏览器都支持repeating-linear-gradient 和 repeating-radial-gradient,用法是:
#example7 {
background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
}
如果你对渐变效果要求很严格,例如图表,动画,我推荐你使用Dojo的GFX程序包,它是创建矢量图的利器。而且对IE的支持也非常好!
CSS颜色渐变底色
老式浏览器,例如IE6,IE8或早期的火狐,并不支持渐变色技术,所以,你最好设置一个缺省的底色,当遇到不支持的浏览器时,background颜色就起到作用了:
/* example 1 - basic */
#example1 {
/* fallback */
background-color:#063053;
/* gradients below */
}
对于不支持的浏览器的另外一种方法是先用新式浏览器实现这个效果,然后截图,然后使用CSS条件判断来调整输出方式。
CSS颜色渐变技术是CSS的一种发展进化的结果,随着现代浏览器技术的越来越成熟,我们能更自信的使用这种技术了。
css 彩虹色渐变色,纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)...相关推荐
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- [css] 怎样用纯CSS实现禁止鼠标点击事件?
[css] 怎样用纯CSS实现禁止鼠标点击事件? pointer-events: none; 是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接.点击事件统统失效. 个人简介 ...
- html中怎样写渐变色代码,纯css简单几行代码实现颜色渐变效果 非常漂亮
线性渐变的实例: 线性渐变 - 从上到下(默认情况下) 下面的实例演示了从顶部开始的线性渐变.起点是红色,慢慢过渡到蓝色: www.sinmeng.net #grad1 { height: 200px ...
- html在不同浏览器器下颜色不同,CSS在不同浏览器下实现颜色渐变效果
想做一个首页巨幕,又不想用图片,这样速度会慢掉一点点,纯色挺丑的,只好试试渐变效果咯.CSS 3有很好的颜色渐变支持,要应付一些老旧的浏览器,还是要几行代码滴. 整理如下:background-p_w ...
- html图片倒角,CSS实例:纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
- css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
分享一段自己写的纯css实现的wifi连接的各种状态代码,希望能帮助到一些学习的朋友.默认图标大小为20px,已经通过transform放大,具体的可以见详细代码及预览. 运行代码 纯css实现wif ...
- html 纯css 树形结构,纯css实现树形结构方法教程
本文主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希 ...
- css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子 今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序 心急的同学,先看效果,我放在codepen上. ...
- 查看全文的css,如何通过纯CSS实现“点击展开全文”功能
看标题大家不难猜到我今天要实现的功能,正如你打开 HTML代码 这是前端开发博客的正文 点击展开全文 将上述代码加入到 single.php 文件里面,按钮一般命名为"点击展开全文" ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
最新文章
- linux上安装java环境
- 步骤5 - Orchestra从微服务提供商获得结果,再发送回WebSocket服务器
- 疯子的算法总结(六) 复杂排序算法 ② 桶排序
- 关于重构之Switch的处理【二】
- Presto入门介绍
- lua如何判断是否支持cookie_如何判断页面布局是否合理?
- KDD 2021 | 谷歌DHE:不使用embedding table的类别型特征embedding
- LNMP笔记:安装 Xcache 缓存扩展,降低服务器负载
- Asp.Net 2.0 发布问题(转)
- 滴滴数据分析实习SQL笔试题
- Android之TextView属性大全
- java.lang.IllegalStateException: Only fullscreen activities can request orientation
- 0X0000007b
- ubuntu16.04 护眼神器Redshift
- 设计模式分析——迭代器模式(Iterator)
- 中医.自定义短语.搜狗拼音输入法.百度输入法
- 网桥(生成树网桥和源路由网桥)
- SAP STMS导入队列显示队列末尾
- CodeForces 13A【暴力】
- 万姓女孩清秀文雅的名字
热门文章
- 算法工程师面试:必备的机器学习、深度学习知识点
- 书_阿朱_好好看书[转]
- 什么是物联网技术
- QT获取HDMI视频采集数据
- Windows 10 C盘大瘦身
- CentOs7下安装mysql5.7
- 华为电脑安装双系统linux,华为MateBook笔记本安装Win10与Ubuntu双系统
- ACM/IOI 国家队集训队论文集锦
- 如何将F4V格式的视频转换成MP4格式
- 微处理器 微型计算机 单片机之间有何区别,微处理器、微计算机、微处理机、CPU、单片机、嵌入式处理器它们之间有什么区别?...