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中的calc()功能
Jul 14 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
HTML基础详解(下)
Oct 16 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
探寻JavaScript中this指针指向
2016/04/23 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
js常用DOM方法详解
2017/02/04 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
vuex存储token示例
2019/11/11 Javascript
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python matplotlib拟合直线的实现
2019/11/19 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
自我鉴定范文
2013/11/10 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2015入党自荐书范文
2015/03/05 职场文书
综治目标管理责任书
2015/05/11 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
JS 基本概念详细介绍
2021/10/16 Javascript
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python