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正方体旋转示例代码
Aug 08 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
浅谈为什么我的 z-index 又不生效了
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
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python实现购物车功能的方法分析
2017/11/10 Python
Python线性方程组求解运算示例
2018/01/17 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
详解django2中关于时间处理策略
2019/03/06 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
用Python 执行cmd命令
2020/12/18 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
施工员岗位职责
2014/03/16 职场文书
党员自我剖析材料
2014/08/31 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
求职自我推荐信
2015/03/24 职场文书
贷款收入证明格式
2015/06/24 职场文书
八年级语文教学反思
2016/03/03 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python