CSS3之渐变（线性渐变，径向渐变）

渐变

一、           线性渐变

1         线性渐变格式

linear-gradient([<起点> || <角度>,]? <点>, <点>…)

只能用在背景上

2         IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘,endColorstr=‘#ff0000‘,GradientType=‘1‘);

<style>

.box{width:300px;height:300px;background:-webkit-linear-gradient(red,blue);background:-moz-linear-gradient(red,blue);background:linear-gradient(red,blue);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘0‘);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

3         参数

起点：从什么方向开始渐变        默认：top

left、top、left top

从上到下

<style>

.box{width:300px;height:300px;border:10pxsolid #000;
background-image:-webkit-linear-gradient(red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

角度：从什么角度开始渐变

xxx deg的形式

逆时针

.box{width:300px;height:300px;border:10pxsolid #000;
background-image:-webkit-linear-gradient(60deg,red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

点：渐变点的颜色和位置

black 50%，位置可选

<style>

.box{width:300px;height:300px;border:10pxsolid #000;
background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

<style>

.box{width:300px;height:300px;border:10pxsolid #000;
background-image:-webkit-linear-gradient(60deg,red0,blue 50%,green 100%);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

4         repeating-linear-gradient

<style>

.box{width:300px;height:300px;border:10pxsolid #000;
background-image:-webkit-repeating-linear-gradient(60deg,red0,blue 30px);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

5         线性渐变实例

加入点的位置

top, red 40%,green 60%

top, red 50%,green 50%

同一个位置两个点——直接跳变

也可以用px

配合rgba

top,rgba(255,255,255,1), rgba(255,255,255,0)

加入背景图片

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%,rgba(255,255,255,0)), url(a.gif)

6         实例1：进度条

<style>

.wrap{width:200px;height:30px;overflow:hidden;border:1pxsolid #000;}

.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green0,green 10px,#fff 10px,#fff 20px); transition:3s;}

.wrap:hover .box{margin-left:-100px;}

</style>

</head>

<body>

<divclass="wrap">

<divclass="box"></div>

</div>

</body>

鼠标移上，向左运动，实现类似进度条的效果

7         实例2：百度音乐图片光影效果

1.

<style>

.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0)0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1)180px,rgba(255,255,255,0) 210px) no-repeat,url(new_bg.png) no-repeat;transition:1s;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

2.

鼠标移上，运动起来

<style>

.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0)0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1)180px,rgba(255,255,255,0) 210px) no-repeat
-200px 0,url(new_bg.png)no-repeat; transition:1s;}

.box:hover{background-position:300px0,-100px -100px;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

二、           径向渐变

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);

起点：可以是关键字（left,top,right,bottom），具体数值或百分比

形状： ellipse、circle

大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner,farthest-side, farthest-corner, contain or cover)）;

注意firefox目前只支持关键字

<style>

.box{width:200px;height:200px;background:-webkit-radial-gradient(red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

<style>

.box{width:200px;height:200px;background:-webkit-radial-gradient(100px50px,red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

<style>

.box{width:200px;height:200px;background:-webkit-radial-gradient(100px50px,circle,red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

<style>

.box{width:200px;height:200px;background:-webkit-radial-gradient(100px50px,100px 20px,red,blue);background:-moz-radial-gradient(100px50px,red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

径向渐变的关键字

<style>

.box{width:300px;height:300px;border:1pxsolid #000;float:left;margin:10px;}

.box:nth-child(1){background:-webkit-radial-gradient(100px 50px,closest-side,red,blue);}

.box:nth-child(2){background:-webkit-radial-gradient(100px 50px,closest-corner,red,blue);}

.box:nth-child(3){background:-webkit-radial-gradient(100px 50px,farthest-side,red,blue);}

.box:nth-child(4){background:-webkit-radial-gradient(100px 50px,farthest-corner,red,blue);}

.box:nth-child(5){background:-webkit-radial-gradient(100px 50px,contain ,red,blue);}

.box:nth-child(6){background:-webkit-radial-gradient(100px 50px,cover ,red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

<divclass="box"></div>

<divclass="box"></div>

<divclass="box"></div>

<divclass="box"></div>

<divclass="box"></div>

</body>

时间： 2024-10-10 05:32:33

CSS3之渐变（线性渐变，径向渐变）的相关文章

Css3渐变(Gradients)-径向渐变

CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你也可以指定渐变中心.形状(圆形或椭圆形).大小. 默认情况下,渐变的中心是center(表示在中心),渐变的形状是ellipse(表示椭圆形),变天的大小是farthest-corner(表示到最远的角落) 语法: background: radial-gradient(center, shape

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

CSS3渐变——径向渐变

上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用. CSS3径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 一.径向渐变的语法 CSS3的径向渐变已得到众多浏览器引擎的支持,只不过其语法的版本根据不同的引擎浏览器,其语法也不一样

CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

初探CSS3 - 径向渐变

CSS3径向渐变是圆形或者椭圆形的渐变方式,颜色不再朝着一条直线的方向渐变,而是从一个起点沿着所有方向的渐变. 以orange向red渐变为例,最简单的径向渐变如下所示: <!DOCTYPE html> <html> <head> <title>radial</title> <meta charset="utf-8" /> <style type="text/css"> *{padd

纯css径向渐变(CSS3--Gradient)

渐变 一.CSS3的径向渐变 效果图网址:http://www.spritecow.com 图像拼接技术 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). html代码: 1 <h1>Hold the front page</h1> 2 <p>Now you get the nitty-gritty of the story.</p> 3 <p>The most importa

深入理解CSS径向渐变radial-gradient

× 目录 [1]定义 [2]椭圆圆心 [3]椭圆类型 [4]椭圆大小 [5]色标 [6]重复渐变 [7]其他 前面的话 上篇介绍了线性渐变,本文接着介绍径向渐变的内容 定义 径向渐变,实际上就是椭圆渐变,圆只是一种特殊的椭圆而已.径向渐变从圆心点以椭圆形状向外扩散,渐变的实现由两部分组成:椭圆和色标.椭圆部分用来控制径向渐变的位置.大小和形状等.而色标部分包含一个颜色值和一个位置,用来控制渐变的颜色变化. [注意]safari4-5.IOS3.2-4.3.android2.1-3只支持线性渐变,

css3 线性渐变和径向渐变

线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>Background Color</title> <style ty

CSS3线性渐变和径向渐变

background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top left, blue,orange);//径向渐变