CSS3linear-gradient线性渐变实现虚线等简单实⽤图形
⼀、作为图⽚存在的CSS3 gradient渐变
我觉得CSS3 Backgrounds⽐较厉害的⼀个地⽅就是⽀持多背景，也就是背景图⽚个数可以⽆限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚⾄，理论上，任意彩⾊jpg图⽚都是可以使⽤CSS3渐变背景实现的。
这种特性和box-shadow类似，参见“”，text-shadow也有⽆限累加性，通常我们可以实现任意粗细和⾊彩的描边效果。
当然我们实际开发的时候，是不会使⽤CSS3渐变来模拟⼀张图⽚的，更多是⽤来⽣成⼀些简单实⽤的图形。
本⽂就将通过实现虚线，三⾓以及加号减号等案例，展⽰下CSS3 linear-gradient线性渐变要图形⽣成技巧。
⼆、CSS3 linear-gradient线性渐变⽣成⽐例可控虚线及⼯具
我们平常要实现⼀个虚线效果，多半是使⽤border-style:dashed声明实现，然⽽虚线边框有⼀个问题，那就是虚线的实虚⽐例是固定的，例
如，Chrome和Firefox浏览器下，颜⾊区的宽⾼⽐是3:1，颜⾊区和透明区的宽度⽐例是1:1：
IE浏览器下颜⾊区的宽⾼⽐是2:1，颜⾊区和透明区的宽度⽐例也是2:1，如下：
如果有设计需求，希望我们的虚线颜⾊区的宽⾼⽐是5:1，此时，border-style:dashed就鞭长莫及了。
此时，借助CSS3 linear-gradient线性渐变我们可以轻松实现上⾯的效果，假设HTML代码如下：
<div class="dashed"></div>
则对应的CSS代码如下：
.
dashed {
height: 1px;
background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);
background-size: 10px 100%;
}
效果截图如下：
当我们使⽤CSS3渐变来构建图形的时候，最画龙点睛的属性，其实并不是渐变本⾝，⽽是background-size属性，让我们的图形约束在特定区域⼤⼩。
关于线性渐变⽣成虚线，我特意制作了⼀个CSS代码⽣成⼯具，您可以狠狠的点击这⾥：
渐变构成图片黑白简单我们可以选择你希望的虚线的⽐例，步幅以及颜⾊，然后对应的CSS代码就可以⽣成了，例如：
有兴趣的话可以⼿动试⼀试。
⼆、CSS3 linear-gradient线性渐变⽣成带线框的三⾓
做到三⾓图形的⽣成，最经典的应该是使⽤CSS border属性了，可参见“”⼀⽂，如果是纯⾊三⾓，使⽤CSS3 clip-path也是⼀个不错的⽅法，关于。
但是有时候我们的三⾓是带线框的，类似下图这种效果：
如果不考虑兼容性，⽐较好的做法是border属性⽣成两侧线框，然后CSS3 transform旋转，但也有局限，那就是如果和三⾓对接的区域它不是纯⾊⽽是渐变背景，则就有问题了，因为此时的三⾓实际上是个旋转45度的正⽅形图形块。
此时使⽤渐变图形⽣成⽅法就没有任何压⼒了，因为可以得到⼀个真正的三⾓（135度斜向渐变到对⾓线位置），⽰意图如下：
相关CSS代码如下（这⾥线框也是渐变实现的）：
.tri {
width: 6px; height: 6px;
background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;    background-size: 6px 1px, 1px 6px, 6px 6px;
transform: rotate(-45deg);
}
眼见为实，您可以狠狠的点击这⾥：
更新记录（10-29）：transparent 6px→hsla(0,0%,100%,0) 6px，新升级Firefox下transparent边缘会有灰⾊背景渲染bug，使⽤rgba或hsla⽩⾊透明表⽰可修复。
三、CSS3 linear-gradient线性渐变⽣成加号和减号
要实现⼀个减号效果⾮常简单，例如要实现⼀个10px*2px的减号图形，则CSS：
.minus {
background-image: linear-gradient(to top, #666, #666);
background-size: 10px 2px;
}
原理如下，先使⽤渐变⽣成⼀个铺满整个元素背景的纯⾊(#666)渐变图⽚，然后使⽤background-size属性控制成我们想要的⼤⼩，效果就实现了。
加号效果也是类似，只是要多⼀层linear-gradient的累加。
最终可以实现类似下图效果：
和传统::before, ::afetr伪元素配合background-color或border相⽐，使⽤渐变背景⽣成有个⾮常重要的好处，那就是居中定位⾮常⽅便，直接在background属性后⾯加个center即可，⽽传统实现通常需要绝对定位，然后再巴拉巴拉⼀通代码来居中，很啰嗦的。
眼见为实，您可以狠狠的点击这⾥：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。