线性渐变


1 background: -webkit-gradient(linear,left bottom,left top,color-stop(0,white),color-stop(0.5,#eee));
2 background: -webkit-linear-gradient(center bottom,white 0,#eee 50%);
3 background: -moz-linear-gradient(center bottom,white 0,#eee 50%);
4 background: -o-linear-gradient(bottom,white 0,#eee 50%);
5 background: -ms-linear-gradient(top,#fff 0,#eee 50%);
6 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘,endColorstr=‘#eeeeee‘,GradientType=0);
7 background: linear-gradient(top,#fff 0,#eee 50%)

线性渐变,码迷,mamicode.com

时间: 2024-10-15 22:52:02

线性渐变的相关文章

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

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

css3线性渐变

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

利用线性渐变阴影旋转实现晴天效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no

线性渐变和放射性渐变

创造放射性渐变:context.createRadialGradient(x0,y0,r0,x1,y1,r1); 参数:x0:渐变的开始圆的 x 坐标, 参数:y0:渐变的开始圆的 y 坐标, 参数:r0:开始圆的半径, 参数:x1:渐变的结束圆的 x 坐标, 参数:y1:渐变的结束圆的 y 坐标, 参数:r1:结束圆的半径: 创造线性渐变:context.createLinearGradient(x0,y0,r0,x1,y1,r1); 放射性渐变和线性渐变的使用放射一样,参数也基本相同:不同的

进度条-线性渐变

/* 进度条 */div.progress { width: 600px; margin: 10px auto; height: 20px; line-height: 20px; font-size: 14px; background: #F7F7F7; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);}div.progress div.bar { float: left; width: 60%; backgr

CSS3 线性渐变(linear-gradient)

CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等).WebKit(Safari.Chrome等).Opera(Opera浏览器).Trident(讨厌的IE浏览器). 本文照常忽略IE不管,我们主要看看在 Mozilla.Webkit

Android线性渐变

布局实现: 1. 在res中建立drawable文件夹. 2. 在drawable文件夹中建立shape.xml. 3. shape.xml的代码如下: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"

颜色线性渐变-CAGradientLayer

我们先来看一下效果图吧: 其实,就是一个颜色的线性渐变,使用CAGradientLayer很容易就能实现.由于代码很简单,就不做过多讲解了,直接看代码吧. 1 import UIKit 2 3 class ViewController: UIViewController { 4 5 override func viewDidLoad() { 6 super.viewDidLoad() 7 setupBackgroundLayer() 8 } 9 10 private func setupBack

如何给SVG填充和描边应用线性渐变

给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线性.径向.我今天先讲线性渐变,下篇我们再看看径向渐变. SVG线性渐变 如果你看过这系列的SVG之前的文章,你应该对这里渐变的很多概念都比较熟悉啦.在<defs>中定义,然后在后面把它们作为填充或描边来引用. 我们使用<linearGradient>元素来定义线性渐变.我们从一个简单的

【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变

颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到.线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可. 1. 颜色插值 在[高级 - 第 5.0 章]里已经提到了颜色插值,在这里做一个例子.先定义颜色插值函数如下, var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compute = d3.interpolate(a,b); 如此一来,compute 可当做函数使用,参数的范