一、渐变 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变 1、 linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果 语法： linear-gradient( [< ...
分类：
Web程序 时间：
2017-05-05 21:44:39
阅读次数：
344
linear-gradient： (线性渐变） 创建遮罩图像。 radial-gradient： (径向渐变) 创建遮罩图像。 repeating-linear-gradient： 重复的(线性渐变) 创建背遮罩像。 repeating-radial-gradient： 重复的(径向渐变) 创建遮罩 ...
分类：
其他好文 时间：
2017-05-04 20:18:22
阅读次数：
199
转载别人的，讲得很详细原文: http://www.w3cplus.com/css3/new-css3-linear-gradient.html © w3cplus.com 再贴几个关于渐变配色的网址 https://uigradients.com/#Frost https://webgradien ...
分类：
Web程序 时间：
2017-05-02 18:19:19
阅读次数：
163
1 2 3 4 5 6 7 8 9 10 11 12 1 div{ 2 width: 300px; 3 height: 200px; 4 border:solid; 5 } 6 #div1{ 7 /*background-image: linear-gradient... ...
分类：
Web程序 时间：
2017-04-30 12:26:37
阅读次数：
167
1、场景一： IE6 下默认div最小高度为2px，如何创建高为1px的容器？ 2、场景二： 移动端高分辨率下，将1px border 渲染成2px background-image linear-gradient border-image iphone6 plus渲染成3px 通过@media 进 ...
分类：
其他好文 时间：
2017-04-22 18:49:27
阅读次数：
220
一、stop位置stop位置，也就是开始渐变的位置。1）stop位置不同将会出现过渡的效果，#fb3开始渐变的位置是20%，在20%之前就只有#fb3，到80%就是#58a。div.transition1{
background:linear-gradient(#fb320%,#58a80%);
}2）stop位置相同就不会有过渡的效果，因为#58a开始过渡的..
分类：
Web程序 时间：
2017-04-17 14:51:28
阅读次数：
292
效果如下： 老式写法 参考：http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html ...
分类：
Web程序 时间：
2017-04-11 16:58:00
阅读次数：
256
绘制渐变背景图 第一种：大神的想法，摘抄 background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);使用CSS3的渐变绘制图像，从左到右。需要注意的是颜色是 0到49%的颜 ...
分类：
其他好文 时间：
2017-03-12 21:28:30
阅读次数：
276
去年7月份做一个公司商城的微信页面（微信用的chrome内核）需要写一个提示返现进度的进度条效果。 一个完整的进度条效果其实可以拆分一下： 一段背景； 一小段的静态的斜纹进度条； 斜纹进度条用线性渐变 linear-gradient 类实现，原理很好理解，2个参数： 1、角度； 2、关键点（包含2个 ...
分类：
Web程序 时间：
2017-03-11 19:41:22
阅读次数：
264
linear-gradient 实用栗子（在Chrome下） 缺角效果先看效果图 <div class="div1"> 这是内容 </div> .div1 { width: 100px; height: 40px; line-height: 40px; background:linear-gradi ...
分类：
Web程序 时间：
2017-03-09 15:18:01
阅读次数：
216
