HTML/CSS[28天] CSS渐变深度学习

0

[28天] CSS渐变深度学习

CSS渐变 linear-gradient radial-gradient 阅读:33 时间:2022年06月13日

CSS渐变有两种线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义由于<gradient>数据类型系<image>的子数据类型,<gr...

CSS渐变有两种

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 

  • 径向渐变(Radial Gradients)- 由它们的中心定义

由于<gradient>数据类型系<image>的子数据类型,<gradient>只能被用于<image>可以使用的地方。因此,linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。

先来了解线性渐变 linear-gradients

线性渐变linear-gradients

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

1.渐变方向

默认为从上到下

background-image: linear-gradient(red, blue);

微信截图_20220613115235.jpg

使用方向指向

background-image: linear-gradient(to right,red, blue);

微信截图_20220613133808.jpg

还可以使用 to top left , to bottom right等组合方向

使用角度

background-image: linear-gradient(45deg,red, blue);

微信截图_20220613134049.jpg

正上方为起始0deg,向顺时针方向一周为360deg,要注意的是,在该语法中的角度值为结束处颜色。

2.渐变停止位置

停止位置要比方向复杂。

颜色后可以用一个位置值(如50%)来指定渐变的终止点位置。

默认情况下,从一个颜色的终止点平滑的过渡到另一个颜色的停止点,颜色之间的中点是两个颜色颜色转换的中点

没听懂吗,那看个例子。如从20%处开始,到50%结束的红蓝渐变:

background-image: linear-gradient(90deg,red 20%, blue 50%);

微信截图_20220613140356.jpg

理论上,前面颜色的停止点必须小于后面颜色的停止点,否则后面颜色的停止点会被覆盖。

颜色允许有多个停止点,但一般不会用到,因为。比如下面这行代码结果等同以上例子

background-image: linear-gradient(90deg,red 5% 20%, blue 50% 90%);

在没有明确标示停止点的颜色上。会有默认隐式的停止点。

默认情况下,如果不带 0% 终止的颜色,则在该点声明的第一个颜色。类似地,最后一种颜色将持续到 100% 标记,或者如果在最后一个没有声明长度,则在 100% 标记处。

关于渐变过渡的中间点

默认情况下,从一个颜色的终止点平滑的过渡到另一个颜色的终止点,颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置,方法是在两个颜色之间添加未标记的 %,以指示颜色的中转位置

继续用例子说明:

一个从红0%到蓝100%的渐变过渡中间点默认在50%处,将其移动动30%处。

background-image: linear-gradient(90deg,red, 30%, blue);

微信截图_20220613142940.jpg

3.多个颜色

background-image: linear-gradient(90deg,red, orange, yellow, green, lightblue, blue);

微信截图_20220613143222.jpg

4.重复

可以使用repeating-linear-gradient重复渐变效果:

background-image: repeating-linear-gradient(90deg, red, blue 50%);

微信截图_20220613143515.jpg

径向渐变radial-gradient

语法为:

radial-gradient(shape size at position, start-color, ..., last-color);

一个红到蓝的径向渐变:

background-image: radial-gradient(red, blue);

微信截图_20220613144122.jpg

1.形状

  • ellipse (默认): 指定椭圆形的径向渐变

  • circle :指定圆形的径向渐变

  background-image: radial-gradient(ellipse, red, blue);
  background-image: radial-gradient(circle, red, blue);

2.尺寸

  • farthest-corner (默认) : 渐变的边缘形状与容器距离渐变中心点最远的一个角相交

  • closest-side :渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)

  • closest-corner : 渐变的边缘形状与容器距离渐变中心点最近的一个角相交

  • farthest-side :与 closest-side 相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边

简单点理解,就是渐变的远端与容器四边或四角的距离关系。这里边与角分别一个实例。

渐变到最近边例子:

background-image: radial-gradient(circle closest-side, red, blue);

微信截图_20220613145616.jpg

渐变到最远角例子:

background-image: radial-gradient(circle farthest-corner, red, blue);

微信截图_20220613145910.jpg

3.位置(中心点)

与background-position或者transform-origin类似。如缺省,默认为中心点。语法为:

at position

举个例子:

background-image: radial-gradient(circle closest-side at 20% 20%, red, blue);

微信截图_20220613150358.jpg

4.停止位置,多颜色,重复

与线性渐变相同。可直接参照上方说明。

径向渐变的重复方法为: repeating-radial-gradient()

一个例子:

background-image: repeating-radial-gradient(red, blue 10%);

微信截图_20220613150855.jpg

大至就这么多的内容。为了巩固,来看看一些有趣的例子。

CSS渐变的脑洞应用

CSS渐变背景纹理

格子

:root {
  --blue: #d5e7ee;
  --white: rgba(252, 242, 221, 0);
}  
.demo{
  width: 210px;
  height: 210px;
  background-image:
  repeating-linear-gradient(90deg, var(--blue) 0px, var(--blue) 10px, var(--white) 10px, var(--white) 20px),
  repeating-linear-gradient(0deg, var(--blue) 0px, var(--blue) 10px, var(--white) 10px, var(--white) 20px);
}

微信截图_20220613152232.jpg

棋盘格

.demo{
  width: 200px;
  height: 200px;
  background-image:
  linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),
  linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

微信截图_20220613153345.jpg

点点格

.demo{
  width: 200px;
  height: 200px;
  background-image: radial-gradient(#fff0c0, #fff0c0 5px, #ff7b7b 5px);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

微信截图_20220613153642.jpg

制作花式分割线,可控虚线:

一条分割线能耍什么花样


更多大量好玩的CSS 渐变纹理效果不在此罗列。请直接移步以下链接把玩。


https://projects.verou.me/css3patterns/


微信截图_20220613153945.jpg



参考资料: https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^