css线性渐变--linear-gradient
切角效果
1、单个切角
1
|
background : linear-gradient( -45 deg, transparent 15px , #58a 0 ); |
通过调整角度,可以做成不同角度的切脚效果,调整transparent后面的数字值,可以调整切角效果的大小。
2、两个切角
1
2
3
4
|
background : linear-gradient( -45 deg, transparent 15px , #58a 0 ) right , linear-gradient( 45 deg, 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( -60 deg, transparent 15px , #58a 0 ) top left , linear-gradient( 60 deg, transparent 15px , #58a 0 ) top right , linear-gradient( -120 deg, transparent 15px , #58a 0 ) bottom left , linear-gradient( 120 deg, transparent 15px , #58a 0 ) bottom right ; background-repeat : no-repeat ; background- size : 50% 50% ; |
1
2
3
4
5
6
|
background : linear-gradient( -60 deg, transparent 15px , #58a 0 ) top left , linear-gradient( 60 deg, transparent 15px , #58a 0 ) bottom left , linear-gradient( -120 deg, transparent 15px , #58a 0 ) top right , linear-gradient( 120 deg, transparent 15px , #58a 0 ) bottom right ; background-repeat : no-repeat ; background- size : 50% 50% ; |
1
2
3
4
5
6
|
background : linear-gradient( -45 deg, transparent 15px , #58a 0 ) top left , linear-gradient( 45 deg, transparent 15px , #58a 0 ) top right , linear-gradient( -90 deg, transparent 10px , #58a 0 ) bottom left , linear-gradient( 90 deg, 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