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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
工程师岗位职责
2013/11/08 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
霸王洗发水广告词
2014/03/14 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
统计员岗位职责
2015/02/11 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书