css线性渐变--linear-gradient

切角效果

1、单个切角

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

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

2、两个切角

1
2
3
4
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确定切角在每一个切片区的位置。

 

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

1
2
3
4
5
6
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%;

 

1
2
3
4
5
6
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%;

　　

1
2
3
4
5
6
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%;

 

内凹圆角的实现

1
2
3
4
5
6
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%;

　　

单个标签实现多个圆

1
2
3
4
5
6
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%;

1
2
3
4
5
6
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%;

　　

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

 

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

1
<p class="text-decoraion">在一定程度上，扁平化的设计趋势的出现，减少了使用渐变色的场景，但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法。</p>
1
2
3
4
5
6
.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设置下划线粗细，可以很细粒度的控制下划线的长宽和位置。

本文转自：https://www.cnblogs.com/zhuhuoxingguang/p/6108236.html

 

posted on 2018-02-05 15:59  henji1122  阅读(236)  评论(0)    收藏  举报

导航