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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
html粘性页脚的具体使用
Jan 18 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获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python编程中的文件操作攻略
2015/10/16 Python
python绘制简单折线图代码示例
2017/12/19 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
用pycharm开发django项目示例代码
2019/06/13 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
pytorch进行上采样的种类实例
2020/02/18 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
django API 中接口的互相调用实例
2020/04/01 Python
Python项目跨域问题解决方案
2020/06/22 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
如何使用PHP session
2015/04/21 面试题
2014年新生军训方案
2014/05/01 职场文书
庆元旦演讲稿
2014/09/15 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
500字作文之周记
2019/12/13 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript