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的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
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+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
python实现批量下载新浪博客的方法
2015/06/15 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python删除列表内容
2015/08/04 Python
python面向对象 反射原理解析
2019/08/12 Python
Python 元组操作总结
2019/09/18 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
如何写好活动总结
2019/06/21 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js