gradient

线性渐变linear-gradient:

1.-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )2.-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */4.filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
.deg0 {
  background: -moz-linear-gradient(0deg, #ace, #f96);
  background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(0deg, #ace, #f96);
  background: -o-linear-gradient(0deg, #ace, #f96);
}

.deg45 {
  background: -moz-linear-gradient(45deg, #ace, #f96);
  background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(45deg, #ace, #f96);
  background: -o-linear-gradient(45deg, #ace, #f96);
}
.deg90 {
  background: -moz-linear-gradient(90deg, #ace, #f96);
  background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(90deg, #ace, #f96);
  background: -o-linear-gradient(90deg, #ace, #f96);
}
.deg135 {
  background: -moz-linear-gradient(135deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
  background: -webkit-linear-gradient(135deg, #ace, #f96);
  background: -o-linear-gradient(135deg, #ace, #f96);
}
.deg180 {
  background: -moz-linear-gradient(180deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(180deg, #ace, #f96);
  background: -o-linear-gradient(180deg, #ace, #f96);
}
.deg225 {
  background: -moz-linear-gradient(225deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 0%,0 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(225deg, #ace, #f96);
  background: -o-linear-gradient(225deg, #ace, #f96);
}
.deg270 {
  background: -moz-linear-gradient(270deg, #ace, #f96);
  background: -webkit-gradient(linear,50% 0%,50% 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(270deg, #ace, #f96);
  background: -o-linear-gradient(270deg, #ace, #f96);
}
.deg315 {
  background: -moz-linear-gradient(315deg, #ace, #f96);
  background: -webkit-gradient(linear,0% 0%,100% 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(315deg, #ace, #f96);
  background: -o-linear-gradient(315deg, #ace, #f96);
}
.deg360 {
  background: -moz-linear-gradient(360deg, #ace, #f96);
  background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(360deg, #ace, #f96);
  background: -o-linear-gradient(360deg, #ace, #f96);
}

径向渐变:radial-gradient

1.webkit引擎中的浏览器chrome4-9,safari4-5
-webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
2. chrome10.0+ safari5.1+
-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
3. gecko firefox3.6+
-moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
4. presto opera11.6+
-o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
5.w3c (ie10+,firefox16+)
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
<position>:主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性,用于确定元素渐变的中心位置。如果这个参数省略了,其默认值为“center”。其值主要有以下几种:

<length>:用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
<percentage>:用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left:设置左边为径向渐变圆心的横坐标值。
center:设置中间为径向渐变圆心的横坐标值或纵坐标。
right:设置右边为径向渐变圆心的横坐标值。
top:设置顶部为径向渐变圆心的纵标值。
bottom:设置底部为径向渐变圆心的纵标值。
<shape>:主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”:

circle:如果<size>和<length>大小相等,那么径向渐变是一个圆形,也就是用来指定圆形的径向渐变
ellipse:如果<size>和<length>大小不相等,那么径向渐变是一个椭圆形,也就是用来指定椭圆形的径向渐变。
<size>:主要用来确定径向渐变的结束形状大小。如果省略了,其默认值为“farthest-corner”。可以给其显式的设置一些关键词,主要有:

closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;
<color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点,100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

 
/* closest-side*/
.closest-side .circle {
    background-image: -webkit-radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
    background-image: radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-side .ellipse {
    background-image: -webkit-radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
    background-image: radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* closest-corner*/
.closest-corner .circle {
    background-image: -webkit-radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
    background-image: radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-corner .ellipse {
    background-image: -webkit-radial-gradient(closest-corner at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
    background-image: radial-gradient(closest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-side */
.farthest-side .circle {
    background-image: -webkit-radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
    background-image: radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-side .ellipse {
    background-image: -webkit-radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
    background-image: radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-corner */
.farthest-corner .circle {
    background-image: -webkit-radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
    background-image: radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-corner .ellipse {
    background-image: -webkit-radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
    background-image: radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}    
 
 
时间: 2024-10-08 10:41:02

gradient的相关文章

机器学习系列(11)_Python中Gradient Boosting Machine(GBM)调参方法详解

原文地址:Complete Guide to Parameter Tuning in Gradient Boosting (GBM) in Python by Aarshay Jain 原文翻译与校对:@酒酒Angie && 寒小阳([email protected]) 时间:2016年9月. 出处:http://blog.csdn.net/han_xiaoyang/article/details/52663170 声明:版权所有,转载请联系作者并注明出 1.前言 如果一直以来你只把GBM

Gradient Boost Decision Tree(&amp;Treelink)

http://www.cnblogs.com/joneswood/archive/2012/03/04/2379615.html 1.      什么是Treelink Treelink是阿里集团内部的叫法,其学术上的名称是GBDT(Gradient Boosting Decision Tree,梯度提升决策树).GBDT是“模型组合+决策树”相关算法的两个基本形式中的一个,另外一个是随机森林(Random Forest),相较于GBDT要简单一些. 1.1    决策树 应用最广的分类算法之一

css3 Gradient背景

css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始颜色],[设置多种过度颜色],[设置结束颜色]) 参数: 第一个参数:指定渐变方向,可以用"角度"的关键字或"英文"来表示: 第一个参数默认:180deg,等同于"to bottom". 后面的颜色至少有2个,即开始颜色和结束颜色. 2.使用 a.举

机器学习中的数学(3)-模型组合(Model Combining)之Boosting与Gradient Boosting

版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系[email protected] 前言: 本来上一章的结尾提到,准备写写线性分类的问题,文章都已经写得差不多了,但是突然听说最近Team准备做一套分布式的分类器,可能会使用Random Forest来做,下了几篇论文看了看,简单的random forest还比较容易弄懂,复杂一点的还会与boosting等算法结合(参见i

机器学习中的算法:决策树模型组合之GBDT(Gradient Boost Decision Tree)

[转载自:http://www.cnblogs.com/LeftNotEasy/archive/2011/03/07/random-forest-and-gbdt.html] 前言 决策树这种算法有着很多良好的特性,比如说训练时间复杂度较低,预测的过程比较快速,模型容易展示(容易将得到的决策树做成图片展示出来)等.但是同时,单决策树又有一些不好的地方,比如说容易over-fitting,虽然有一些方法,如剪枝可以减少这种情况,但是还是不够的. 模型组合(比如说有Boosting,Bagging等

GBDT(Gradient Boosting Decision Tree)算法&amp;协同过滤算法

GBDT(Gradient Boosting Decision Tree)算法参考:http://blog.csdn.net/dark_scope/article/details/24863289 理解机器学习算法:http://blog.csdn.net/dark_scope/article/details/25485893 协同过滤算法:http://blog.csdn.net/dark_scope/article/details/17228643

Stochastic Gradient Descent

Stochastic Gradient Descent 一.从Multinomial Logistic模型说起 1.Multinomial Logistic 令为维输入向量; 为输出label;(一共k类); 为模型参数向量: Multinomial Logistic模型是指下面这种形式: 其中: 例如:时,输出label为0和1,有: 2.Maximum Likelihood Estimate and Maximum a Posteriori Estimate (1).Maximum Like

梯度下降(Gradient Descent)小结

在求解机器学习算法的模型参数,即无约束优化问题时,梯度下降(Gradient Descent)是最常采用的方法之一,另一种常用的方法是最小二乘法.这里就对梯度下降法做一个完整的总结. 1. 梯度 在微积分里面,对多元函数的参数求?偏导数,把求得的各个参数的偏导数以向量的形式写出来,就是梯度.比如函数f(x,y), 分别对x,y求偏导数,求得的梯度向量就是(?f/?x, ?f/?y)T,简称grad f(x,y)或者▽f(x,y).对于在点(x0,y0)的具体梯度向量就是(?f/?x0, ?f/?

梯度下降(Gradient descent)

首先,我们继续上一篇文章中的例子,在这里我们增加一个特征,也即卧室数量,如下表格所示: 因为在上一篇中引入了一些符号,所以这里再次补充说明一下: x‘s:在这里是一个二维的向量,例如:x1(i)第i间房子的大小(Living area),x2(i)表示的是第i间房子的卧室数量(bedrooms). 在我们设计算法的时候,选取哪些特征这个问题往往是取决于我们个人的,只要能对算法有利,尽量选取. 对于假设函数,这里我们用一个线性方程(在后面我们会说到运用更复杂的假设函数):hΘ(x) = Θ0+Θ1