css线性渐变--linear-gradient

最新推荐文章于 2023-12-08 15:28:14 发布

weixin_34342905

最新推荐文章于 2023-12-08 15:28:14 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/henji/articles/8416858.html

本文介绍如何使用CSS3的渐变属性实现各种切角和圆角效果，包括单个切角、多个切角、内凹圆角及自定义文字下划线等技巧。

切角效果

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;    
  }