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翻转效果应用示例
Apr 08 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
详解CSS3浏览器兼容
Dec 24 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计算2点经纬度之间的距离代码
2013/08/12 PHP
php中opendir函数用法实例
2014/11/15 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
Python操作SQLite简明教程
2014/07/10 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python 实现简易的记事本
2020/11/30 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
销售工作岗位职责
2013/12/24 职场文书
校园达人秀策划书
2014/01/12 职场文书
电子专业自荐信
2014/07/01 职场文书
党员个人总结范文
2015/02/14 职场文书
写给老婆的保证书
2015/02/27 职场文书
幼儿园老师个人总结
2015/02/28 职场文书