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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 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面向对象 字段的声明与使用
2012/06/14 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
中药专业毕业自荐书范文
2014/02/08 职场文书
产品发布会策划方案
2014/05/12 职场文书
三年级学生评语大全
2014/12/26 职场文书
英语邀请函范文
2015/02/02 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
MySQL 数据表操作
2022/05/04 MySQL
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers