在html中如何添加线性渐变,CSS3如何实现线性渐变效果
CSS3实现线性渐变效果的方法:首先创建一个HTML示例文件;然后在body中创建一个div;最后通过“linear-gradient”属性实现线性渐变效果即可。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
CSS3是CSS(层叠样式表)技术的升级版本。我们可以通过css3属性实现更多炫酷的页面效果,丰富网站内容,比如背景颜色呈线性渐变的效果!
下面我们就给大家介绍一个常见的css3渐变效果。
首先大家要知道,CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)和径向渐变(Radial Gradients)。
本节先重点介绍线性渐变-Linear Gradients。
代码示例如下:
CSS3创建线性渐变示例
.container{
text-align:center;
padding:20px 0;
width:960px;
margin: 0 auto;
}
.container div{
width:200px;
height:150px;
display:inline-block;
margin:2px;
color:#ec8007;
vertical-align: top;
line-height: 230px;
font-size: 20px;
}
.linear{
background:linear-gradient(to bottom, #4b6c9c , #5ac4ed);
}
效果如下图:
上图所示,就是由颜色#4b6c9c到#5ac4ed进行过渡的线性渐变。
或者设置颜色从#9492ff到#ccccff过渡,效果如下:
css3中的linear-gradient属性就是表示用线性渐变创建图像。
默认情况下,linear-gradient线性渐变是从上到下开始过渡的。
当然渐变的方向也可以是,向下/向上/向左/向右/对角方向,以及定义一个角度(angle)。
其语法是:background: linear-gradient(direction, color-stop1, color-stop2, ...);
第一个参数表示线性渐变的方向,第二个参数表示开始过渡的颜色即起点颜色,第三个参数表示过渡到的颜色。
注:Internet Explorer 9 及之前的版本不支持渐变。
本篇文章就是关于css3实现线性渐变效果的方法介绍,非常简单易懂,希望对需要的朋友有所帮助!
在html中如何添加线性渐变,CSS3如何实现线性渐变效果相关推荐
- html背景线性渐变,CSS3背景颜色渐变 - 线性/放射性/循环
渐变就是多种颜色混合而成的效果,css3要实现渐变,就必须使用渐变函数来设置background或则background-imge属性.同时为了兼容各个浏览器(IE,safari,chrome,Fir ...
- 在html中怎么写背景色渐变,css3背景色渐变
css3背景色渐变难是不难,就是麻烦.不同浏览器用法不同,还有个爱掺和的ie... 一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ...
- -webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
webkit内核的safari. Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari. Chrome的Linear Gradients (线 ...
- css新特性:线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)
线性渐变 线性渐变 重复性线性渐变 径向渐变 重复性径向渐变的使用 线性渐变 线性渐变是向下.向上.向左.向右.对角方向的颜色渐变. 其语法格式为: background-image: linear- ...
- html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
css3设置边框颜色渐变的方法有哪些 发布时间:2020-09-14 14:51:54 来源:亿速云 阅读:110 作者:小新 css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- html垂直线性渐变,再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3线性渐变与径向渐变
目标:使用background-image属性实现渐变背景效果 CSS 定义了两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 径向渐变(由其中心定义) 1.CSS 线性渐变 如需创建线性渐 ...
最新文章
- Intent.ACTION_MAIN
- 我爱学习第一天(委托)
- 将阿拉伯数字转换成中文大写的好算法
- 计量经济学——试题总结
- Hi3559AV100移植友方4G模块N720V5(二)
- 灵信LED屏 二次开发C#
- PHP连接MYSQL没有反应
- rs485的1:n计算机连接和n:n的主从plc通讯,富士人机界面与GE90-70 PLC N:1通讯在轧钢生产线的应用...
- 单片机学习笔记(一)——概述
- 成功解决win10下某些文件路径不存在问题
- 一文看懂,互联网这30年!
- 【Python】Scrapy爬虫介绍requests爬虫移植到Scrapy爬虫
- 重塑规则 定义未来 三星Galaxy S22系列中国发布
- 利元转债,奕瑞转债上市价格预测
- 【原创】EJB开发基础——EJB规范
- 北航计算机学院吴俊杰,吴俊杰老师在经管学院建院六十周年大会上的发言
- python字典一键多值如何遍历_[宜配屋]听图阁
- SqlServer数据库常用sql语句
- 软件测试质量标准的指标,关于测试设计的基本原则和用例的质量标准
- 【网络与系统安全实验】口令破解及防御