css3 给背景设置渐变色的方法


Posted in HTML / CSS onSeptember 12, 2019

css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之前的线性过度,这个css3属性只支持高版本的浏览器。

//浏览器前缀
background: linear-gradient(red, blue);
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue); 
background: -moz-linear-gradient(red, blue);

to top :颜色从下往上渐变:

background:-webkit-linear-gradient(to top, red, blue); 
background:linear-gradient(to top,red,blue);

to bottom :颜色从上往下渐变:

background:-webkit-linear-gradient(to bottom, red, blue); 
background:linear-gradient(to bottom,red,blue);

to left :颜色从右往左渐变:

background:-webkit-linear-gradient(to left, red, blue); 
background:linear-gradient(to left,red,blue);

to right :颜色从左往右渐变

background:-webkit-linear-gradient(to right, red, blue); 
background:linear-gradient(to right,red,blue);

to right :颜色从左往右渐变

background:-webkit-linear-gradient(to right, red, blue); 
background:linear-gradient(to right,red,blue);

to bototm right :颜色从左上角度到右下角渐变

background:-webkit-linear-gradient(to right, red, blue); 
background:linear-gradient(to right,red,blue);

to top left :颜色从右下角度到左上角渐变

background:-webkit-linear-gradient(to right, red, blue); 
background:linear-gradient(to right,red,blue);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 #HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 #HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 #HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 #HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 #HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 #HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 #HTML / CSS
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
Linux下快速搭建php开发环境
2017/03/13 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python3 与python2 异常处理的区别与联系
2016/06/19 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python判断正负数方式
2020/06/03 Python
详解python对象之间的交互
2020/09/29 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
业务内勤岗位职责
2014/04/30 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
大明湖导游词
2015/02/03 职场文书
市场部岗位职责范本
2015/04/15 职场文书
房产遗嘱范本
2015/08/06 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang