三角形：通常会使用透明的border模拟出一个三角形：▲ 切角：采用多重线性渐变实现切角 梯形：利用伪元素加旋转透视实现梯形 当然，还有另一种更简单的方法是利用border实现，借助上面的构造三角形的方法，在矩形两侧构造两个透明的三角形 五边形：梯形加上三角形，很容易就组合成一个五边形，这里需要借助 ...
分类：
Web程序 时间：
2018-02-20 17:57:36
阅读次数：
268
背景颜色线性渐变【 linear-gradient】 语法： background:linear-gradient(起点，起点颜色，过度色[可选]，终点颜色); 起点：top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。 过度色：可以插入多个，表示多种颜色的渐变 ...
分类：
其他好文 时间：
2018-01-27 00:48:10
阅读次数：
181
今天总结渐变的问题，渐变分为线性渐变、径向渐变。呼呼，废话少说， 线性渐变：background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色); Linear:渐变的类型（线性渐变）； 渐变的形式：可选参数 有两种方式-1、设置旋转角度，0度 ...
分类：
Web程序 时间：
2018-01-10 20:21:25
阅读次数：
365
1 /*标准写法*/ 2 .item:nth-child(1) .linear-gradient { 3 background-image: linear-gradient(yellow, green); 4 } 5 6 /*多个颜色渐变*/ 7 .item:nth-child(2) .linear ...
分类：
其他好文 时间：
2018-01-10 18:46:51
阅读次数：
124
建议先去了解清楚了径向渐变，线性渐变的用法先 这个作者的css制作波浪线讲解很不错额：https://www.jianshu.com/p/8570433e3669不理解的可以看看这个链接的额 可以去菜鸟教程上查找径向渐变的案例进行更改容易理解其属性值都是怎么用的额(*^__^*) 嘻嘻……希望能帮到 ...
分类：
Web程序 时间：
2018-01-09 20:12:55
阅读次数：
137
一、渐变 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。 可分为线性渐变、径向渐变 1、 线性渐变 （gradient 变化） linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。 2、 ...
分类：
Web程序 时间：
2017-11-28 01:27:07
阅读次数：
230
一、作为图片存在的CSS3 gradient渐变 我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景，也就是背景图片个数可以无限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚至，理论上，任意彩色j ...
分类：
Web程序 时间：
2017-11-22 21:57:03
阅读次数：
341
1、线性渐变：createLinearGradient(x0,y0,x1,y1) x0 渐变开始点的 x 坐标。 y0 渐变开始点的 y 坐标。 x1 渐变结束点的 x 坐标。 y1 渐变结束点的 y 坐标。 createLinearGradient() 方法创建线性的渐变对象。渐变可用于填充矩形、 ...
分类：
其他好文 时间：
2017-11-03 18:57:41
阅读次数：
187
用纯css写出这个背景，代码如下 <!DOCTYPE html><html><head><style> #div1{padding:35px;border:4px solid transparent;background-origin:border-box;background-clip:paddi ...
分类：
Web程序 时间：
2017-11-01 17:01:19
阅读次数：
232
