上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:. 注意还需颠倒background-size长宽的设定。

思路：利用CSS3的linear-gradient。首先设置元素的background-size为20px 20px；利用linear-gradient为元素设置渐变的背景图片，分别向上下左右四个方向画0.5px的线。

渐变的类型主要分为两种：线性渐变和径向渐变；线性渐变是一个向上、向下、向左、向右或者对角方向的渐变，而径向渐变则是由它们的中心定义。因为它是一个比较新的属性，所以它在浏览器中使用时需要添加它的前缀，下面的图片是完全支持该属性的第一个浏览器版本：。这篇文章主

我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。back

WeUI是一套小程序的UI框架，所谓UI框架就是一套界面设计方案，有了组件，我们可以用它来拼接出一个内容丰富的小程序，而有了UI框架，我们就可以让我们的小程序变得更加美观。WeUI是微信官方设计团队的一套同微信原生视觉体验一致的基础样式库，在手机微信里搜索

css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介绍用css3的渐变来改善这一问题。linear

CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。如果指定位置使用百分

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

效果预览按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。源代码下载请从 github 下载。

因为我不喜欢背公式，希望自己能找到比较容易理解和推理的记忆方式吧，很早就感觉CSS3渐变的属性组成不太好记忆，所以今天终于挖了这个坑，其实也没什么很特别的，嘻嘻，如果有错误欢迎提出。基本用法我们一般都是在添加background的时候会用到这个渐变效果，渐

它是图片<image>类型的一种，但是渐变类型图片没有尺寸，也没有长宽比。它的尺寸取决于被应用的场景，比如作为元素的背景图片时，其大小取决于元素的background-size，当用作list-style-image属性值时取决于元素的size

简解Css3 - linear-gradient概念CSS linear-gradient() 函数创建一个表示颜色线性渐变的 <image> 。简单的说，元素只要用了linear-gradient，它等同于一张图片。不要把它当作颜色用在co

正文在第二章《背景与边框》中第五节《条纹背景》中，谈到了css3的新属性值linear-gradient,但是这里并不是详细说明这个新属性的用法，这里主要是用它来完成背景条纹，来看看原文中的说明与演示。假设我们有一条基本的垂直线性渐变，颜色从#fb3 过渡

相信这两个效果很多人都想要，哈哈，我看到很多app，下载进度就是这样的，虽然平淡，但是很有用，只有你遇到了，才知道为什么有用了。下面就简单分析一下实现原理。首先，用到的css3特性有：css3线性渐变linear-gradient，和-webkit-bac

切角效果切角效果是一种常见的视觉风格设计。但是现在在CSS里，依然无法简单的生成切角效果。background: linear-gradient;如果想要四个角都切，则可以。内联SVG与border-image方案SVG方案不熟悉，暂时不讨论。裁切路径方案

# 概念CSS linear-gradient() 函数创建一个表示颜色线性渐变的 。简单的说，元素只要用了linear-gradient，它等同于一张图片。不要把它当作颜色用在color等样式中。# 使用方式简单起见，只讲一种最通用的使用方式。# 原理

background-position: 0px 0px, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;* 每个图形都是一个小的三角形，两个三角形相互拼接成一个正方形，然后近一步定位即可。* 注意角度的旋转，他是顺时针的