CSS3渐变属性

葉無聞

已于 2024-08-13 15:23:22 修改

阅读量8.8k

点赞数 28

分类专栏： CSS 文章标签： linear-gradient radial-gradient 渐变 css3

于 2019-05-28 10:53:10 首次发布

本文链接：https://blog.csdn.net/HU_YEWEN/article/details/90604792

版权

CSS 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

渐变可以使得元素背景更加有灵性并具有生气，虽然我们可以使用背景图片来呈现渐变效果，但却是不够灵活，当想要改变颜色时需要使用图片编辑器重新编辑，而渐变则可以在代码中直接改变颜色就可以了。CSS3提供了两种渐变方式，分别是线性渐变（linear-gradient）和径向渐变（radial-0gradien）。

一、线性渐变（linear-gradient）

线性渐变就是沿着某个方向进行颜色上的渐变，可以使用左右上下以及对角线。

线性渐变语法：

background: linear-gradient(direction, color1, color2 [stop], color3...);

1、direaction：表示线性渐变的方向。有以下三种表示方法。

（1）渐变方向

to left：设置渐变为从右到左。
to bottom：设置渐变从上到下。这是默认值。
to right：设置渐变从左到右。
to top：设置渐变从下到上。

也可以是to left top、to left bottom、to right top、to right bottom四个对角线方向。

（2）方向起点

top：设置渐变从上到下。这是默认值。
bottom：设置渐变从下到上。
left：设置渐变从左到右。
right：设置渐变为从右到左。

也可以是left top、left bottom、right top、right bottom四个对角线方向。

（3）角度（angle）

角度用数字+单位来进行表示，单位使用deg。所有的颜色都是从中心出发，0deg是to top的方向，顺时针是正，逆时针是负。

具体可以看下面的图（有点丑）。

0deg相当于to top
90deg相当于to right
180deg相当于to bottom，这是默认值
270deg或者 - 90deg相当于to left

也相应地有45deg、135deg、225deg、315deg来表示对角线方向，但是使用角度表示方向相较于给定水平垂直方向更加灵活可以根据需要来调整角度，已达到想要的效果。

2、color- * ：表示渐变中的过度颜色，一般第一个表示渐变起始颜色，最后一个表示渐变的结束颜色，中间表示中间过度颜色。

3、stop：color后面可以加上stop，stop可以使百分值也可以是像素值，表示某个颜色在stop位置处固定，如下：

background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);

渐变起始颜色是蓝色，当过度到20%时为绿色，也就是说在20%处恰好是绿色，然后继续渐变过度到黄色，到50%处恰好是黄色，后面同个道理，直到结束颜色红色，正好处于100%处。

二、重复线性渐变（repeating-linear-gradient）

说到线性渐变，我们不得不提一下重复线性渐变，有时我们想生成如下图的条纹效果，我们最方便的方法就是重复线性渐变。

语法代码：

background: repeating-linear-gradient(#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

以上红色从0开始渐变，到达10%时还是红色，所以形成红色条纹，在10%后变为黄色，直到20%还是黄色，所以此时形成黄色条纹，然后渲染时会将这20%的红黄条纹进行重复的渐变，使得呈现出红黄条纹相间的效果。

我们也可以添加入方向

background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

三、径向渐变（radial-gradient）

径向渐变指从一个中心点开始沿着四周产生渐变效果。由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。

当我们为一个渐变设置多个颜色时，它们会平分这个100%的区域来渐变。当然除了百分比，我们也可以使用具体的像素来设置这个大小。像素设置的大小指的是从渐变圆心向外延伸的距离。

径向渐变语法：

<radial-gradient> = radial-gradient([ [<shape> || <size>] [ at <position> ]? ,
| at <position>, ]?<color>[stop]?[ ,<color>[stop]?]+)

其中各种属性的意思如下：

// 圆心位置
<position> = [ <length> | <percentage> | left | center | right ]? [ <length> | 
<percentage> | top | center | bottom ]?  //默认处于中心点
// 渐变形状
<shape> = circle | ellipse  //默认是ellipse
// 渐变大小
<size> = <extent-keyword> | [ <circle-size> || <ellipse-size>]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size> = <length>
<ellipse-size> = [ <length> | <percentage> ]{2}
<shape-size> = <length> | <percentage>
// 渐变颜色及颜色位置
<color>[stop]? = <color> [ <length> | <percentage> ]?

上面需要详细讲明一下

我们在渐变定义时可以直接定义渐变的形状，但除了这种方式，还可以通过为size传入具体值在确定渐变形状，具体说明如下：

1、当传入一个大小参数size或者两个相同值得size时，则表示该渐变形状是圆。

background: radial-gradient(60px,#f00 0,#ff0 100%);

2、当传入两个大小不同的size参数时，则表示该渐变形状为椭圆。

background: radial-gradient(100px 60px,#f00 0,#ff0 100%);

当然，我们也可以在声明渐变形状的同时在其后紧跟渐变大小，中间用空格隔开，效果与上面相同，例如

background: radial-gradient(circle 60px,#f00 0,#ff0 100%);

background: radial-gradient(ellipse 100px 60px,#f00 0,#ff0 100%);

需要特别注意的是，若渐变形状为圆形，则该渐变大小不能为百分数，而椭圆既可以为具体数值也可以为百分数，个人认为或许是因为圆形半径若为百分数的话就无法确定是以元素的宽为标准还是以高为标准了。

上面定义size除了给定具体值或使用百分比之外，还可以使用extent-keyword，extent-keyword的值有如下四个：

closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）
closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）
farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）

下面就以closet-side为例

background: radial-gradient(circle closest-side at 100px 100px,#f00 0,#ff0 100%);

可以看到渐变圆与容器最近的边相切，其余三个值也同理如上。

除了size需要注意之外，position也需要简单说明一下。

position用于定义渐变形状圆形位置，它的值可以使具体值，百分比或方位值（left、right、top、bottom、left top、top right、bottom left、bottom right），这里主要说一下几个注意点。

1、当在position缺省的额情况下，默认渐变形状处于容器的中心点。

2、当为position只给定一个具体值或百分比时，则其表示在水平方向上所处位置，而垂直方向上默认为50%，如下。

background: radial-gradient(circle 60px at 70px,#f00 0,#ff0 100%);

3、当为position只给定一个方位时，则表示圆心在该方位方向上的值为0,而与其垂直的方向上则默认50%，如下。

background: radial-gradient(circle 60px at left,#f00 0,#ff0 100%);

除上面要注意的之外，还需要注意如果size是 extent-keyword中的closest-side或closest-corner时，则position不能是方位值，因为方位值默认在一个或两个方向得我位置为0（例如left水平方向为0，left top 水平垂直方向上为0），所以不存在最近边或角相切的情况，当然设置具体值为0或百分比为0%时也要注意这种情况。

background: radial-gradient(circle closest-side at 0px 50px,#f00 0,#ff0 100%);

可以看到上面没呈现出任何效果。

四、重复径向渐变（repeating-radial-gradient）

上面再说线性渐变时有说到线性渐变具有重复线性渐变，为径向渐变同样具有重复径向渐变，先看一个简单例子。

background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%,
#ff0 10%,#ff0 20%);

重复径向渐变总体上与重复线性渐变差不多，只是重复线性渐变是一个方向上的重复渐变，不论是水平垂直还是对角线，如下图，左边为0%，右边为100%。

然而重复径向则是以圆心为中心点，以放射性方式渐变，中心点为0%，圆边界为100%。

关于上面重复径向渐变是如何生成条纹相间的就不多加述说，原理和重复线性渐变相同。

下面给出一个重复径向渐变的实用例子，使用重复径向渐变生成一个唱片的效果。

HTML：

<div class='record-container'>
     <div class='record'></div>
</div>

CSS：

.record-container {
     display: inline-block;
     overflow: hidden;
     width: 400px;
     height: 300px;
     border-radius: 10px;
     box-shadow: 0 6px #99907e;
     background: #b5ac9a;
}
        
.record {
     position: relative;
     margin: 19px auto;
     width: 262px;
     height: 262px;
     border-radius: 50%;
     background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) 
no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) 
no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,
 #2a2928 6px);
     background-size: 50% 100%, 100% 50%, 100% 100%;
}    
.record:after {
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -35px;
     border: solid 1px #d9a388;
     width: 68px;
     height: 68px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
     background: #b5ac9a;
     content: '';
}