gradient相关知识
-
css3线性渐变linear-gradient()练习css3渐变有两种，一种是线性渐变，语法是linear-gradient();一种是径向渐变，语法是radial-gradient();对于不同的浏览器可采用不同的前缀实现效果，ie中可以用滤镜实现渐变 先了解线性渐变： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 200px; height: 150px; background:-webkit-linear-gradient(left,red,blue); background:-moz-linear-gradient(left,red,blue);
-
CSS神奇的conic-gradient圆锥渐变conic-gradient 是个什么？说到 conic-gradient ，就不得不提的它的另外两个兄弟：linear-gradient : 线性渐变radial-gradient : 径向渐变说这两个应该还是有很多人了解并且使用过的。CSS3 新增的线性渐变及径向渐变给 CSS 世界带来了很大的变化。而 conic-gradient ，表示圆锥渐变，另外一种渐变方式，给 CSS 世界带来了更多可能。下面进入正文，本文中所有示例，请在高版本 Chrome 内核下预览。 API看看它最简单的 API：{ /* Basic example */ background: conic-gradient(deeppink, yellowgreen); }与线性渐变及圆锥渐变的异同那么它和另外两
-
10个demo示例学会CSS3 radial-gradient径向渐变一、语法细节记不住怎么办？实际开发的时候，当要使用radial-gradient径向渐变的时候，脑中会有大概的语法，但是细节却记不住，于是想快捷找个案例看看具体怎么用，然后直接套一下。通常一番搜索，会发现虽然是个简单需求，但是正好满足这个需求的页面却不好找，乱糟糟的。下次遇到这种场景，直接来本站搜“径向渐变”，或者直接搜索“渐变”，就有专门展示radial-gradient径向渐变基本语法使用案例的文章。文章共展示了10例常见使用案例，相信一定可以覆盖你的使用场景的。首先，假设我们使用同一段HTML作为示意：<div class="radial-gradient"></div>二、示例1：最基础最简单使用CSS如下：.radial-gradient { width: 400px; height: 200px; backgro
-
CSS渐变之linear-gradient做前端的时候难免会遇到这样一个问题，运营或产品需要实现下面这样一个需求20161111.png这是我们公司双11推出的一个抽奖活动页面，大家请看我红色箭头所指的区域，它其实是一个gif动画，见下图闪烁.gif大家一看就明白了吧，这类似我们小时候玩xxx的时候最外面那个闪烁的灯，作为前端该怎么在页面上实现呢？有两种解决方法gif图片，下下策css3动画，最优解那么css3动画和我们今天讲的这个linear-gradient貌似没什么关系啊，虽说两者都是css3的特性？其实我想说的是如果用css3动画实现，那么他的背景颜色该怎么实现呢？对，如果用单纯的颜色肯定不满足需求，所以一定要用线性渐变，下面先附上用线性渐变做的背景（还没加上动画，最后会附上实现整个效果的图片）light-box-bg.png虽说更设计还是有点差别，主要是我没问他们用的渐变是从什么角度开始的，渐变颜色是什么，但是我觉得我用css3实现的效果充当背景应该是没问题的（不一定要和设计一模一样，该变通的时候要学会变通，毕竟决定权在我们手上）。我实现
gradient相关课程
gradient相关教程
- 5.1 线性渐变 <div class="demo"></div>创建一个从上到下颜色由红变绿的线性渐变。.demo{ width: 100px; height: 100px; background: linear-gradient(red,green);}效果图创建一个从上到下颜色由红变绿的线性渐变效果图如果渐变方向正好是上下方向，那么只要写两个颜色就好了。接上面一个例子，让红色在元素 70%的位置之后在开始向绿色渐变。 .demo{ width: 100px; height: 100px; background: linear-gradient(red 70%,green);}效果图让红色在元素 70%的位置之后在开始向绿色渐变效果图这个的实现只要在颜色后面加一个 % 数就好，也可以是其他的计量单位例如 px。创建一个从左到右的渐变背景色。 .demo{ width: 100px; height: 100px; background: linear-gradient(to right,red 70%,green);}效果图创建一个从左到右的渐变背景色效果图创建一个从左上到右下的渐变颜色。 .demo{ width: 100px; height: 100px; background: linear-gradient(to right bottom,red,green);}效果图创建一个从左上到右下的渐变颜色效果图这里的 to right bottom 也可以写成 right bottom 。创建一个 30 度角的线性渐变。 .demo{ width: 100px; height: 100px; background: linear-gradient(30deg,red,green);}效果图创建一个 30 度角的线性渐变效果图创建一个 0 度角的线性渐变。 .demo{ width: 100px; height: 100px; background: linear-gradient(0deg,red,green);}效果图创建一个 0 度角的线性渐变效果图
- 5.2 径向渐变 创建一个红色到绿色的径向渐变。.demo{ width: 200px; height: 100px; background:radial-gradient(red,green);}效果图创建一个红色到绿色的径向渐变效果图说明：渐变默认形状是椭圆形，但是如果在一个宽度和高度相等的元素内则会变成圆形，但是其实还是椭圆的，只是看到的像圆形，这是因为两个中心点重合了。创建一个椭圆红色到绿色的假圆形径向渐变。.demo{ width: 100px; height: 100px; background:radial-gradient(red,green);}创建一个椭圆红色到绿色的假圆形径向渐变效果图说明：这不是真的圆形如果宽度和高度不相等则变成椭圆的。创建一个真正的圆形渐变。.demo{ width: 100px; height: 100px; background:radial-gradient(circle,red,green);}创建一个真正的圆形渐变效果图创建一个重复的径向渐变。.demo{ width: 100px; height: 100px; background:repeating-radial-gradient(circle,red 5%,green 20%);}效果图创建一个重复的径向渐变效果图设定渐变的不同size我们左下对比。.demo{ width: 100px; height: 100px; float: left; margin-right: 10px;; }.demo0{ background-image: radial-gradient( red, green);}.demo1{ background-image: radial-gradient(closest-side , red, green);}.demo2{ background-image: radial-gradient(farthest-side , red, green);}.demo3{ background-image: radial-gradient(closest-corner , red, green);}.demo4{ background-image: radial-gradient(farthest-corner , red, green);} 效果图设定渐变的不同size我们左下对比效果图说明：从左到右依次为：默认 closest-side farthest-side closest-corner farthest-corner,可以清楚的观察到渐变的中心点都是元素的中心点，当时他们的过度点出现了明显的不同。改变渐变的中心点。.demo{ width: 100px; height: 100px; background-image: radial-gradient( at top left,red, green);}效果图改变渐变的中心点效果图说明，也可以是 数量单位例如 background-image: radial-gradient( at 10% 20%,red, green);我们可以把它理解为一个坐标。
- 2. 实例代码 要点就是在 head 标签中用 link 标签引入chinese-gradient 和 chinese-layout，然后就可以使用中文关键字啦：1189运行结果：
- 2. 实例代码 要点就是在 head 标签中用 link 标签引入 chinese-gradient 和 chinese-layout。然后就可以使用中文关键字啦：1197运行结果：
- 2. 中文库 借助市面上已有的 CSS 库，我们可以很轻易的做到居中布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。然后我们再用一个中文渐变色的 CSS 库来美化我们的界面：chinese-gradient要点就是在head标签中用link标签引入 chinese-gradient 和 chinese-layout。然后就可以使用中文关键字啦：1250运行结果：
- 2. 实例代码 1203运行结果：为了能让大家清晰的看到滑动效果，这个案例使用了 chinese-gradient 来做背景渐变色。这里就不用再给主盒子加上边距啦，因为在最上面的时候上栏是透明的，不会覆盖住内容的。
gradient相关搜索
-
g area
gamma函数
gcc 下载
generic
genymotion
gesture
getattribute
getchar
getdocument
getelementbyid
getelementsbytagname
getmonth
getproperty
gets
getty
git clone
git pull
git push f
git 命令
git 使用