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 26 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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的单引号和双引号 字符串效率
2009/05/27 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php编程每天必学之表单验证
2016/03/01 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
javascript中this关键字详解
2016/12/12 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python 如何展开嵌套的序列
2020/08/01 Python
python实现简单文件读写函数
2021/02/25 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
学校门卫工作职责
2013/12/07 职场文书
家具促销活动方案
2014/02/16 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2015年招聘工作总结
2014/12/12 职场文书
学生检讨书
2015/01/27 职场文书
中班上学期个人总结
2015/02/12 职场文书
团委工作总结2015
2015/04/02 职场文书