css3渐变放大CSS3 教程,css3渐变gradient – CSS3高级教程
CSS3的渐变功能允许你在不使用任何图像的情况下创建从一种颜色到另一种颜色的渐变。
使用CSS3渐变
CSS3的渐变特性提供了一个灵活的解决方案来生成两个或多个颜色之间的平滑过渡。早些时候,为了达到这样的效果,我们不得不使用图像。使用CSS3的渐变可以减少下载时间和节省带宽使用。带有渐变的元素可以按比例放大或缩小到任何程度而不会失去质量,而且由于它是由浏览器生成的,所以输出也会渲染得快得多。
渐变有两种样式:线性和径向。
创建CSS3线性渐变
要创建一个线性渐变,你必须定义至少两个颜色停止。然而,创建更复杂的渐变效果,你可以定义更多的颜色停止。颜色停止是你想要渲染平滑过渡的颜色。你也可以设置一个起始点和一个方向(或角度),沿着这个方向应用渐变效果。使用关键字创建线性渐变的基本语法如下:
linear-gradient(direction, color-stop1, color-stop2, ...)
线性渐变-从上到下
下面的例子将创建一个从上到下的线性渐变,这是默认的。
.gradient {
/* 不支持渐变的浏览器的备份 */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow);
/* 标准语法 */
background: linear-gradient(red, yellow);
}
线性渐变-从左到右
下面的示例将创建一个从左到右的线性渐变:
.gradient {
/* 备份 */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(left, red, yellow);
/* 标准语法 */
background: linear-gradient(to right, red, yellow);
}
线性渐变-对角线
你也可以沿着对角线方向创建一个渐变,下面的示例将创建一个从元素框的左下角到右上角的线性渐变。
.gradient {
/* 备份 */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(bottom left, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(bottom left, red, yellow);
/* 标准语法 */
background: linear-gradient(to top right, red, yellow);
}
使用角度设置线性渐变方向
如果你想对渐变的方向有更多的控制,你可以设置角度,而不是预定义的关键字。0度角创建了一个从下到上的渐变,正角代表顺时针旋转,这意味着90度角创建了一个从左到右的渐变。使用角度创建线性渐变的基本语法如下:
linear-gradient(angle, color-stop1, color-stop2, ...)
下面的示例将使用角度创建从左到右的线性渐变。
.gradient {
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(0deg, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(0deg, red, yellow);
background: linear-gradient(90deg, red, yellow);
}
创建线性渐变使用多种颜色停止
你还可以为超过两种颜色创建渐变。下面的示例将向你展示如何使用多个颜色停止来创建线性渐变。所有颜色的间隔都是均匀的。
.gradient {
/* 备份 */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow, lime);
/* 标准语法 */
background: linear-gradient(red, yellow, lime);
}
设置位置颜色停止
颜色停止是沿渐变线的点,将有一个特定的颜色在该位置。颜色停止的位置可以指定为百分比,也可以指定为绝对长度。你可以指定你想要达到的效果的颜色。
.gradient {
/* 备份 */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow 30%, lime 60%);
/* 语法 */
background: linear-gradient(red, yellow 30%, lime 60%);
}
注:按百分比设置颜色停止位置时,0%表示起点,100%表示终点。然而,你可以使用该范围之外的值,即0%之前或100%之后,以获得你想要的效果。
重复线性渐变
你可以使用repeating-linear-gradient()函数来重复线性渐变。
.gradient {
/* 备份 */
background: white;
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
/* For Internet Explorer 10 */
background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
/* 标准语法 */
background: repeating-linear-gradient(black, white 10%, lime 20%);
}
创建CSS3径向渐变
在径向渐变中,颜色从一个点开始,以圆形或椭圆形平滑地向外扩散,而不是像线性渐变那样从一种颜色向另一种颜色渐变。创建径向渐变的基本语法如下:
radial-gradient(shape size at position, color-stop1, color-stop2, ...);
径向渐变()函数的自变量有如下含义:
position—指定渐变的起始点,可以用单位(px、em或百分比)或关键字(左、底等)来指定。
shape -指定渐变结束形状的形状。它可以是圆的,也可以是椭圆的。
size -指定渐变结束形状的大小,默认是farthest-side。
下面的示例将展示如何创建具有均匀间隔颜色停止的径向渐变。
.gradient {
/* 备份 */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(red, yellow, lime);
/* 语法 */
background: radial-gradient(red, yellow, lime);
}
设置径向渐变形状
径向渐变函数radial-gradient()
的形状参数用来定义径向渐变的最终形状。它可以取值圆或椭圆。下面是一个例子:
.gradient {
/* 备份 */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(circle, red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(circle, red, yellow, lime);
/* 标准语法 */
background: radial-gradient(circle, red, yellow, lime);
}
注意:如果省略或未指定形状参数,则如果大小为单个长度,则结束形状默认为圆形,否则为椭圆。
设置径向渐变的大小
radial-gradient()函数的size参数用于定义渐变的结束形状的大小,大小可以设置使用单位或关键字:closest-side, farthest-side, closest-corner, farthest-corner。
.gradient {
/* 备份 */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
/* 标准语法 */
background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}
重复径向渐变
还可以使用repeat-
radial-gradient()函数重复径向渐变。
.gradient {
/* 备用 */
background: white;
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
/* For Internet Explorer 10 */
background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
/* 标准语法 */
background: repeating-radial-gradient(black, white 10%, lime 20%);
}
CSS3的透明度和渐变
CSS3渐变也支持透明度,当叠加多个背景时,你可以使用它来创建背景图像的淡入效果。
.gradient {
/* 备份 */
background: url("images/sky.jpg");
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
/* For Internet Explorer 10 */
background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
/* 标准语法 */
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}
css3渐变放大CSS3 教程,css3渐变gradient – CSS3高级教程相关推荐
- 计算机网络高级教程.pdf,网络技术-计算机网络(高级教程).pdf
下载 第1章 引 言 过去的三百年中,每一个世纪都有一种技术占据主要的地位. 1 8世纪伴随着工业革命而来 的是伟大的机械时代: 1 9世纪是蒸汽机时代: 2 0世纪的关键技术是信息的获取.存储.传送 ...
- html实现从内向外渐变色,CSS3 由内到外(放射性)渐变
记得有个师兄在一个分享讲座中提到了由内到外渐变,为了实现这种效果,就用图片去做背景,假如加载得太多图片会使网页加载得很慢,所以有必要跟boss"吵架"!那时候我就觉得好像有点不科学 ...
- CSS3常用的几种颜色渐变模式总结
转载:https://www.jb51.net/css/511433.html 一.线性渐变:linear-gradient 语法: <linear-gradient> = linear- ...
- css3 图片放大缩小闪烁效果
直接把图片替换就可以了,我的图片是透明的,所以body设置为黑色的,不不要可以去掉 <!doctype html> <html lang="en"> < ...
- 什么是css选择器?css3中5种常见的基本选择器-web前端教程
本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:什么是css选择器? CSS是一种用于屏幕上渲染html, ...
- 21天学通HTML5和CSS3第二版,21天学通HTML5+CSS3
本书全面.系统.深入地讲解了HTML5+CSS3网页设计与编程的基础语法与高级应用.在讲解过程中,通过大量取自实际操作的实例,将网页开发知识全面.系统.深入地呈现给读者.此外,作者专门为本书录制了大量 ...
- css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处 在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
- Photoshop教程|ps渐变如何使用?如何给图片制作出渐变效果?
PS是设计者经常使用的一款软件,学会用ps渐变能够让你的设计更加吸引人,那么photoshop渐变工具怎么用?今天小编就给大家带来了ps渐变教程,希望对你有帮助! 首先,用ps打开你需要进行渐变调整的 ...
- css旋转不围绕圆心,css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed])...
css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed]) 我有这个演示 . 如图所示,元素围绕其中心旋转,但我正 ...
最新文章
- c#中如何跨线程调用windows窗体控件?
- EID:宏基因组测序在新发腹泻病毒鉴定中的应用
- 《程序员修炼之道》备忘清单
- java添加不了源代码,JAVA初学者的一些问题
- 程序员面试宝典(Java)Beta6.0免费下载
- postgresql存储函数实现大量模拟数据插入
- 高通LCD的pwm背光驱动
- android已停止三星,急,android离线打包程序三星下总报 程序 已停止
- 软件工程-读书笔记(第4章)
- Visio 画流程图 入门
- fragstats教程
- 基于java软件工程专业教辅平台课程子系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
- opencv小案例 --- 证件照背景替换
- Hi,欢迎大家来到阿毛小猪的博客,分享自己学习中的经验,默默的前行,聆听心的声音...
- 专转本-数学考试大纲
- JVM命令之 jstat:查看JVM统计信息
- Jmeter beanshell语法
- python一键去PDF水印,只需十行代码,超级简单...
- button标签定义type属性
- cad与连接mySQL数据库_C++连接mysql数据库的两种方法