关于渐变。

关于渐变,我现在做的这个项目也只是用到了线性渐变。那我就说一下线性渐变吧,也许不想网上说的那么全,但是也是我的经验了。

关于渐变,在ie里面是不支持的。但是ie里面也是有他单独的让其渐变的属性,那就是filter;

好了,闲话不多说,直接上代码。

div{

background: -webkit-linear-gradient(#5EDA07, #167503); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#5EDA07, #167503); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#5EDA07, #167503); /* Firefox 3.6 - 15 */
background: linear-gradient(#5EDA07, #167503); /* 标准的语法 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#5EDA07‘, endColorstr=‘#167503‘,GradientType=0 );

}

在你想让他渐变的那个地方的css里面加上这段话就行了,这是由上到下的渐变。#5EDA07是上部的颜色, #167503是最下面的颜色。

filter是ie自己独有的滤镜。

时间: 2024-10-12 12:44:46

关于渐变。的相关文章

一种高斯模糊渐变动画的实现-b

关于高斯模糊的方式有很多种,但是如果需要模糊渐变,那么对这种高斯模糊算法的性能要求是比较高的,今天这里重点不讨论算法,只是提供一个动画实现的思路.动画效果如下: 高斯模糊渐变动画 //高斯模糊 -(UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur {        if (blur < 0.f || blur > 1.f) {              blur = 0.5f;        }      

GDI+ 画渐变色环

在onpaint() 函数中加入如下代码,本次利用DrawArc来实现. #define PI 3.1415926 int angle=360; int x=(rect.Width()-300)/2; int y=190; int width=300; int hight=300; int wide=34; graphics.SetSmoothingMode(SmoothingModeAntiAlias);//抗锯齿 for(float i = 0.0; i < PI; i += (float)

CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

一.线性渐变在 Mozilla 下的应用     语法: 1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从左到右,如果定义成 left top,那就是从左上角到右下角.第二个和第三个参数分别是起点颜色和终点颜色.你还可以在它们之间插入更多的参数,表示多种颜色的

Android UI设计之&lt;十&gt;自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51559694 好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客是在2014年写的:Android UI设计之<七>自定义Dialog,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效

SVG渐变

前面的话 给SVG元素应用填充和描边,除了使用纯色外,还可以使用渐变.本文将详细介绍SVG渐变 线性渐变 有两种类型的渐变:线性渐变和径向渐变.必须给渐变内容指定一个id属性,否则文档内的其他元素不能引用它.为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面 线性渐变沿着直线改变颜色,要插入一个线性渐变,需要在SVG文件的defs元素内部,创建一个<linearGradient> 节点 <svg height="70" v

火狐浏览器适用的 CSS简单的渐变背景

background: -moz-linear-gradient(left, #3992D0, rgba(227, 157, 168, 0.5)); 从左到右第一个参数写left: 从上到下则写top: 第二个参数是渐变开始的颜色: 第三个参数是渐变结束的颜色和透明度. 所谓rgba: R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数 | 百分数 A:Alpha透明度.取值0~1之间. 前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数

使用CSS渐变

转载自:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients CSS 渐变 是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片,可以加快页面的载入时间.减小带宽占用.同时,因为渐变是由浏览器直接生成的,它在页面缩放时的效果比图片更好,因此你可以更加灵活.便捷的调整页面布局. 浏览器支持两种类型的渐变:线

css3线性渐变

css3渐变分为线性渐变(linear-gradient)和径向渐变(radial-gradient).下面简单介绍下linear-gradient的应用. 以下都是在webkit内核浏览器下进行测试,firefox和opera只需更改下前缀即可,IE下则有特定的滤镜来实现. -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法

CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边框 4.1.border-radius 圆角 4.2.边框图片border-image 五.变形 transform 5.1.rotate()2D旋转 5.2.设置原点 transform-origin 5.3.平移 translate() 5.4.缩放 scale 5.5.斜切扭曲skew 六.渐变

PIE使IE支持CSS3圆角盒阴影与渐变渲染

PIE使IE支持CSS3圆角盒阴影与渐变渲染 http://css3pie.com/download/