border-image属性是一个是一个简写属性，通过此属性可使用图片来创建边框，但是border-image无法实现圆角，所以换一个思路：通过padding来实现，给父节点设置渐变背景，通过padding模拟边框

本文就讨论讨论：使用 CSS 如何制作如上所示磨砂（毛玻璃）质感效果的渐变背景图，如何借助 CSS-doodle 工具，批量产生该效果图，并且附带动画效果

canvas实现:绘制三角形、设置渐变色并填充，上述代码实现一个渐变色三角形，如果想要绘制多个渐变色三角形，就需要多次进行「1，2」操作。css实现:绘制渐变色的矩形、绘制两个和背景色同色的三角形

给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。CSS 提供了 border-image 属性用于给 border 绘制复杂图样，与 background-image 类似

CSS3 渐变使您能够是你的背景颜色在两个或多个颜色之间平滑过渡。早些时候，你必须使用图像实现这些效果。 然而, 通过使用CSS3渐变可以减少下载时间和带宽的使用

在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯css实现渐变文字了

渐变是CSS3中比较丰富多彩的一个特性，通过渐变我们可以实现许多绚丽的效果。渐变可分为线性渐变和径向渐变。线性渐变：沿着某条直线朝一个方向产生渐变效果

渐变的效果是由浏览器生成的，渐变的类型主要分为两种：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）；线性渐变是一个向上、向下、向左、向右或者对角方向的渐变

一开始用 background: linear-gradient(to right, #000,#fff) ，谷歌、360极速模式、火狐、欧朋（都是新版）可以兼容；ie9 不可以兼容。所以为了ie或其他较低版本浏览器兼容：

对给定的两个颜色值进行渐变计算，得到渐变的所有色值的数组。 示例：计算 #ec9089 与 #c12927 之间的渐变色值，步长设定为 100

线性渐变:为了创建一个线性渐变，必须至少定义两种颜色结点。同时，也可以设置一个起点和一个方向（或一个角度）。其共有三个参数:第一个参数表示线性渐变的方向,第二个和第三个参数分别是起点颜色和终点颜色。

在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！

css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果。这篇文章主要介绍下css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变的方法，以便大家学习参考！

对内容很长的部分有一个渐变的隐藏的效果，个人觉得这个设计还是很好的，符合手机大小的应用场景，没有一下子显示完全，可以很快的滑倒页面底部，一定程度上减少了滑动时间，用户体验很好，对整个页面有一个大概的预览，强迫症会感觉很爽。

精选最酷的渐变色调，coolHue有60个最酷的渐变颜色，能复制 CSS3 代码和直接下载背景图片。