css3颜色渐变:css3如何实现背景颜色渐变?
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法。
我们要知道的是css3渐变有两种类型:css3线性渐变和css3径向渐变,下面我们就来看一下这两种css3渐变实现背景颜色渐变的效果是怎样的。
打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)
一、css3线性渐变设置的背景颜色渐变
首先我们要知道css3线性渐变所用的属性是linear-gradient。
语法:linear-gradient(to bottom,colorStrat,colorEnd)
参数含义:
第一个参数指定 渐变的方向
to bottom 从上至下;to bottom right 从左上至右下;to right 从左至右;to up right 从左下至右上;
to up 从下至下;to up left 从右下至左上;to left 从右至左;to bottom left 从右上至左下
第二个参数 指定渐变色的开始颜色
第三个参数 指定渐变色的结束颜色
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
height: 200px;
background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
background: linear-gradient(yellow, green)); /* 标准的语法(必须放在最后) */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>
css3背景颜色渐变效果如下:
二、css3径向渐变设置的背景颜色渐变
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
css3径向渐变用到的属性是radial-gradient。
语法:background: radial-gradient(shape size at position, start-color, ..., last-color);
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
height: 150px;
width: 200px;
background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
background: radial-gradient(orange, yellow, pink); /* 标准的语法(必须放在最后) */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>
css3背景颜色渐变效果如下:
本文到这里就结束了,关于css3渐变中css3线性渐变和css3径向渐变的更多内容可以我!!!
css3颜色渐变:css3如何实现背景颜色渐变?相关推荐
- php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- element修改el-table 表头的背景颜色横向渐变色 + 修改表头背景颜色
vue + element-ui 修改el-table 表头的背景颜色横向渐变色 + 修改表头背景颜色 表头背景颜色横向渐变效果图: 修改表头背景颜色和字体颜色效果图: 直接上代码: 修改表头的背景颜 ...
- android 通知栏背景颜色跟随app导航栏背景颜色变化而变化
原文地址为: android 通知栏背景颜色跟随app导航栏背景颜色变化而变化 通知栏(notification)背景颜色跟随app导航栏(top title)背景颜色变化而变化. 这也叫沉浸式状态栏 ...
- html指定区域的背景颜色,JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法..具体实现方法如下: 代码如下: JS实现点击颜色块切换指定区域的背景颜色 适时切换网页指定区域背景颜色 请选择背景: function g ...
- css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- 保护眼睛(改变窗口颜色,网页和Pdf背景颜色)
保护眼睛(改变窗口颜色,网页和Pdf背景颜色) 自从小Y入手以来,一直天天泡网,这个眼睛基本快杯具了啊. 如果常常用电脑更容易导致眼睛过度疲劳而得干眼症,所以大夫建议电脑屏幕不要用白色,因为白色 对眼 ...
- css3属性之边框圆角、背景与渐变
css3之圆角.背景及渐变 border-radius 兼容性:IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera border-radius 属性允许我们为元素添加圆 ...
- html td无边框颜色,table的td设置背景颜色后边框框消失
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性 与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
- python3颜色代码_python3中布局背景颜色代码分析
我们想要给某个模块着重突出,以便引起大家注意的时候,通常给那个模块的背景颜色换亮一点.这种情况的操作多见于我们想要突出表格中的某个数据,或是某一项的名称. 在python3中设置布局背景颜色需要通过代 ...
- android背景颜色动态修改,Android自定义TextView带圆角及背景颜色(动态改变圆角背景颜色)...
最近根据项目需求自定义了一个TextView控件,主要用来做状态的标识,比如一个订单状态有各种,当然了这种设置在Android中可以直接用xml文件来处理,但是对于xml文件太过于麻烦,针对不同的颜色 ...
最新文章
- android编程fragment,Android中关于FragmentA嵌套FragmentB的问题
- 待在小公司好多年了,微服务还没怎么玩过。。。
- 131、ThreadLocal (转载)
- 字符串(一):char 数组
- Linux之最常用的20条命令
- php微服务架构设计模式,《微服务架构设计模式》读书笔记---第十一章:开发面向生产环境的微服务应用...
- SoftReference的用法
- 摔跤视频软件测试,Apple Watch 4摔倒检测立功:成功救人一命,网友:马上入手!...
- 程序员如何跟领导提离职_员工辞职不交接工作被领导怒怼:我不批离职,跟你耗着,结果蒙了...
- 金蝶记账王登录显示连接金蝶云服务器异常,金蝶KIS记账王系统初始化常见问题...
- css 特殊性 权重排列
- 古代的酒到底多少度,为何古人动不动喝好几坛都不会醉呢?
- VBA代码执行过程中,显示程序的运行状态
- 关于18183-王者荣耀专区网站的TDK简要分析(更多内容请访问http://www.eduaskx6.com/)...
- STM32 + RT Thread OS 学习笔记[四]
- 2012年全国医院排名(转)
- JavaWeb全套教程笔记_前端技术
- ThreeJs 学习之旅(七)
- 2.5W 字详解线程与锁了,面试随便问!!
- slite 存储图片
热门文章
- C++ replace用法
- python中算术运算符_python中的基本算术运算符有哪些
- Esp8266 进阶之路31【外设篇】分享一个乐鑫esp8266 SDK编程使用 IIC总线驱动 0.96寸的OLED显示屏,显示天气预报信息。(附带Demo)
- java接口加密 ras,Jmeter 使用封装 jar 解决 RSA+AES 参数加密接口请求
- lxd容器运行Android,使用 LXD 容器运行 Ubuntu Core
- tensorflow estimator使用总结
- H5 Web Notification桌面推送消息
- 投递简历上百家,石沉大海了无音讯?阿里Java技术架构师教你如何写好你的技术简历
- php xml nodeName,php DOMDocument nodeName属性返回’#text’与nodeName
- textedit 内容刷新_QT中如何让一个按钮单击后更新一个TextEdit