css线性渐变--linear-gradient

使用css直接写渐变，对于现在而言，应该属于比价简单的一件事了，在一定程度上，扁平化的设计趋势的出现，减少了使用渐变色的场景，但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法。

更进一步的话，应该就是斑马线的实现了，只要多谢几遍，其实也没什么难度。

最近在学习《css揭秘》，里面关于linear-gradient的用法，真的让人有大开眼界的感觉。

在他讲解的切角效果的章节里面，扩展几个css图形变化。

1、单个切角

background: linear-gradient(-45deg, transparent 15px, #58a 0);

　　通过调整角度，可以做成不同角度的切脚效果，调整transparent后面的数字值，可以调整切角效果的大小。

2、两个切角

background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
            linear-gradient(45deg, transparent 15px, #58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;

　　在超过一个切角的效果的时候，就需使用css3的background应用多层背景的特性来完成多重渐变，从而实现多个切角，并且要确保背景不得重复（background-repeat），划分每个背景图片的大小（background-size）。

下面实现的效果也还都属于简单效果，也是在不断重复渐变，并确认大小。

利用角度确定切角形成的角度大小，利用transparent后面的值，确定切角形成的形状大小，利用left,right, top, bottom确定切角在每一个切片区的位置。

这个也属于四个切角效果，唯一要点是把切角都放在一个角落里面，导致看起来就是个菱形的效果，如果将颜色改变一下，就是我们正常看见的一个正规的合乎视觉的菱形。

background: linear-gradient(-60deg, transparent 15px, #58a 0) top left,
            linear-gradient(60deg, transparent 15px, #58a 0) top right,
            linear-gradient(-120deg, transparent 15px, #58a 0) bottom left,
            linear-gradient(120deg, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;

background: linear-gradient(-60deg, transparent 15px, #58a 0) top left,
            linear-gradient(60deg, transparent 15px, #58a 0) bottom left,
            linear-gradient(-120deg, transparent 15px, #58a 0) top right,
            linear-gradient(120deg, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;

　　

background: linear-gradient(-45deg, transparent 15px, #58a 0) top left,
            linear-gradient(45deg, transparent 15px, #58a 0) top right,
            linear-gradient(-90deg, transparent 10px, #58a 0) bottom left,
            linear-gradient(90deg, transparent 10px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;

内凹圆角的实现

background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;

　　

单个标签实现多个圆

background: radial-gradient(circle at center center, transparent 15px, #58a 0) top left,
            radial-gradient(circle at center center, transparent 15px, #58a 0) top right,
            radial-gradient(circle at center center, transparent 15px, #58a 0) bottom left,
            radial-gradient(circle at center center, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;

background: radial-gradient(circle at center right, transparent 15px, #58a 0) top left,
            radial-gradient(circle at center left, transparent 15px, #58a 0) top right,
            radial-gradient(circle at center left, transparent 15px, #58a 0) bottom left,
            radial-gradient(circle at center right, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;

　　

不断实验的话，能够发现更多更好玩的形状。

补充一个线性渐变的使用场景，自定义文字下划线:

<p class="text-decoraion">在一定程度上，扁平化的设计趋势的出现，减少了使用渐变色的场景，但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法。</p>

.text-decoration{
    color: red;
    line-height: 2;
    background: linear-gradient(currentColor, currentColor) no-repeat  0 2.15em;
    background-size: 40px 1px;
  }

　　通过background-position的位置，定位下划线所在的位置，通过background-size的第一个值width设置下划线长度，第二个值height设置下划线粗细，可以很细粒度的控制下划线的长宽和位置。