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网格的三个新特性详解
Apr 04 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
HTML中meta标签及Keywords
Apr 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
无限级别菜单的实现
2006/10/09 PHP
PHP 递归效率分析
2009/11/24 PHP
php session安全问题分析
2011/06/24 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
js选项卡的制作方法
2017/01/23 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
python多进程共享变量
2016/04/06 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
Oracle性能调优原则
2012/05/03 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
创业计划书六个要素
2013/12/26 职场文书
后进生评语大全
2015/01/04 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
深入理解 Golang 的字符串
2022/05/04 Golang