CSS3实现渐变背景

定义与用法

css3的linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向(指定为一个角度)的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */linear-gradient(blue, red);

/* 渐变轴为45度，从蓝色渐变到红色 */linear-gradient(45deg, blue, red); 

/* 从右下到左上、从蓝色渐变到红色 */linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */linear-gradient(0deg, blue, green 40%, red);

浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

"webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。

函数

Chrome

Firefox

Safari

Opera

linear-gradient()

26.0

10.0 -webkit-

10.0

16.0

3.6 -moz-

6.1

5.1 -webkit-

12.1

11.1 -o-

CSS 语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

值	描述
direction	用角度值指定渐变的方向(或角度)。
color-stop1, color-stop2,...	用于指定渐变的起止颜色。

CSS3实现渐变背景相关推荐

CSS3实现渐变背景动画特效
效果图: 具体实现代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
HTML5、CSS3进阶——渐变背景
目标:使用background-image属性实现渐变背景效果是多个颜色逐渐变换的视觉效果,一般用于设置盒子的背景工作中一般已不采用这种方式: background-image:linear-gr ...
CSS3 线性渐变背景的过渡效果
对于background-color,可以直接transition: background-color 2s就能实现过渡效果,但对于background:-webkit-radial-gradient ...
【CSS3】渐变背景
文章目录一.线性渐变 1. 渐变方向 2. 节点分布 3. 重复线性渐变二.径向渐变 1. 可选属性值[shape size at position] 2. 节点分布 3. 重复径向渐变一.线性 ...
php如何在添加div的背景颜色_css3颜色渐变：css3如何实现背景颜色渐变？
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
css3 渐变背景圆形,CSS 教程（5）-Css3-1,边框,背景,渐变,
1.CSS3 边框用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop 在 CSS3 中 border-radius 属性被用于创建圆角 div { ...
css3颜色渐变：css3如何实现背景颜色渐变？
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
html渐变编织背景,css3编写浏览器背景渐变背景色
web前端群,189394454,有视频.源码.学习方法等大量干货分享知识点:rgb全色循环算法,HEX与RGB颜色转换算法.CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数 ...
css3渐变背景+背景图片
网站需要一个渐变背景上面有一副图片,在图片以外的区域显示背景色 <!DOCTYPE html> <html><head><meta charset=" ...
CSS3技巧：利用css3径向渐变做一张优惠券（转）
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

CSS3实现渐变背景

定义与用法

浏览器支持

CSS 语法

更多实例

实例1

实例2

实例3

实例4

实例5

CSS3实现渐变背景相关推荐

最新文章

热门文章