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 相关文章推荐
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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调用Oracle存储过程
2006/10/09 PHP
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
python初步实现word2vec操作
2020/06/09 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python的信号库Blinker用法详解
2020/12/31 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
就业表自我评价分享
2014/02/06 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL