【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(上)

简介: 一直对渐变背景这块比较感兴趣,但是因为每天加班实在太忙了,任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识,一来满足了自己的好奇心,二来可以更加了解这方面的知识。

前言



一直对渐变背景这块比较感兴趣,但是因为每天加班实在太忙了,任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识,一来满足了自己的好奇心,二来可以更加了解这方面的知识。跟更多不断学习的小伙伴们一起进步,一起汲取新的知识。不断成长,不断精进自己的知识。有想一起讨论技术,一起成长的伙伴们,也可以加微信一起交流。各微信群里面,有很多前端领域的大佬,在他们身上学到了很多,今后也努力向他们看齐。不断提升自己。加油。


CSS radial-gradient() 函数



定义与用法


radial-gradient() CSS函数创建了一个图像。

该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。

形状可以是圆形(circle)或椭圆形(ellipse)。

与其它渐变相同,径向渐变是一个不固定尺寸的图像,即,它没有首选的大小,也没有首选的比例。具体大小将由它所应用的元素的大小决定。


例如:


1.双色圆形渐变


background: radial-gradient(#e66465, #9198e5);

1.JPG


2.closest-side


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


background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

2.JPG


3.cicle圆形渐变


background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

3.JPG


4.ellipse椭圆形


radial gradient 的组成



4.JPG


【解释】:

  1. 径向渐变由其中心点、边缘形状轮廓、两个或多个色值结束点定义而成。
  2. 为了创建平滑的渐变,径向渐变函数绘制了一系列从中心点放射到边缘形状(甚至可能超出范围)的同心轮廓。
  3. 边缘形状可以是圆形(circle)或椭圆形(ellipse)。
  4. 色彩结束点位于虚拟渐变射线上,该渐变射线从中心点水平向右延伸。
  5. 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点(代表100%)。
  6. 每个形状都是一种单色,并由其相交的渐变射线上的颜色确定。
    基本语法:


radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)
eg:radial-gradient(circle at center, red 0, blue, green 100%)


  1. 【注意】:gradient属于image类型,所以它可以用于任何适用于image的地方。不能用于 background-color 和其他属性比如color数据类型。


可配置参数


参数 解释
position 与background-position或者transform-origin类似。如没有设置,默认为中心点。
shape 渐变的形状。圆形(渐变的形状是一个半径不变的正圆)或椭圆形(轴对称椭圆)。默认值为椭圆
size 渐变的尺寸大小
color-stop 表示某个确定位置的固定色值,包含一个color值加上可选的位置值(相对虚拟渐变射线的percentage或者length长度值)。 百分比值0%,或者长度值0,表示渐变中心点;百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
extent-keyword 关键字用于描述边缘轮廓的具体位置。


参考资料MND-linear-gradient():linear-gradient)


径向渐变演示


  1. x轴:left: 0% center: 50% right: 100%
  2. y轴 0% center: 50% bottom: 100%

5.JPG


在线展示地址


  1. 数值

数值:x轴数值表示在x轴上离0点(渐变框左上角)的偏移量;y轴数值表示在y轴上离0点的偏移量。

6.JPG


在线展示地址

  1. 使用百分比


其中x轴的百分比相对于渐变框的宽度,而y轴的百分比相对于渐变框的高度。渐变框的宽高由background-size决定。

7.JPG


在线展示地址

  1. 单个值
    当只有一个值时,默认第二个值为center。

8.JPG


在线展示地址

  1. shape形状
    定义渐变的形状是圆circle或椭圆ellipse。默认是椭圆。

9.JPG


在线展示地址


extent-keyword描述




常量 描述 用法
closest-side 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。 background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
closest-corner 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
farthest-side 与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。 background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
farthest-corner 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。 background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);

10.JPG

在线展示地址


线性渐变的色标


与线性渐变的色标相同的部分不再重复,这里只说明不同的部分。由于位置处于100%的色标有时并不会占满渐变区域,则浏览器会默认使用最后一个色标的颜色铺满渐变区域。

11.JPG


在线展示地址


repeating-radial-gradient重复渐变


  1. CSS函数repeating-radial-gradient创建一个从原点辐射的重复渐变组成的image 。
  2. 它类似于radial-gradient 并且采用相同的参数,但是它会在所有方向上重复颜色,以覆盖其整个容器。
  3. 函数的结果是 gradient数据类型的对象, 是一种特殊的image类型。


示例


/* 一个从容器中心点开始的重复渐变,   从红色开始,渐变到蓝色,再渐变到绿色 */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

12.JPG


  1. 每次重复时,色标位置的偏移量都是基准渐变长度(最后一个色标和第一个之间的距离)的倍数。
  2. 最后色标的色值应该与第一个色标的色值保持一致;如果不一致的话,会导致非常突兀的渐变效果。
  3. 它没有原始尺寸或首选尺寸,也没有首选的比列。它将自适应于对应元素的尺寸。


【注】:其他参数使用跟radial-gradient()一致。可参考上面介绍。


径向渐变重复


  1. 重复渐变可以实现径向渐变的重复效果,使色标在椭圆方向上无限重复,实现一些特殊的效果。
  2. 只有当首尾两颜色位置不在0%或100%时,重复渐变才生效。
background-image: -webkit-repeating-radial-gradient(blue 20%,green 50%);
background-image: repeating-radial-gradient(blue 20%,green 50%);

13.JPG

在线展示地址


linear-gradient()线性渐变


CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型,是一种特别的image数据类型。


14.JPG

在线展示地址

参考资料:深入理解CSS径向渐变radial-gradient:linear-gradient


线形渐变的构成


15.JPG

  1. 渐变线上的颜色值是由不同的点来定义,包括起始点,终点,以及两者之间的可选的中间点(中间点可以有多个)。
  2. 起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。(垂直线跟渐变线在同一象限内)
  3. 终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的。
  4. 起点附近的点具有跟起点相同的颜色值,终点附近的点具有跟终点相同的颜色值。


示例代码


linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
linear-gradient(red 10%, 30%, blue 90%);
linear-gradient(red 40%, yellow 30%, blue 65%);
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);


使用语法

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]
相关文章
|
7天前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
|
19天前
|
前端开发
CSS进阶
CSS进阶内容
23 2
|
2天前
|
前端开发 开发者
CSS进阶-CSS3多列布局
【6月更文挑战第14天】CSS3的多列布局简化了复杂布局,提供杂志样式排版。通过`column-*`属性如`column-count`和`column-gap`实现内容分割和列间距控制。常见问题包括内容溢出、列间距不当和兼容性问题。解决方法包括使用`word-break`和`hyphens`处理长单词,灵活设置列宽和列数,以及为旧浏览器提供回退方案。代码示例展示了一个自动平衡列高的两列布局。理解并解决这些问题将帮助开发者更好地利用CSS3多列布局。尽管有兼容性挑战,但它是现代网页设计的重要工具。
|
2天前
|
前端开发 开发者 UED
CSS进阶-CSS Sprites技术
【6月更文挑战第14天】**CSS Sprites是一种合并多个小图至大图的技术,减少HTTP请求,提升页面加载速度。本文探讨了精灵图的核心概念,常见问题(如定位不准、适应性问题、维护困难)及解决方案。建议使用工具精确计算坐标,采用媒体查询适应不同屏幕,建立图标管理机制,并提供代码示例展示如何应用。尽管有WebP、SVG等新技术,但在处理大量小图标时,CSS Sprites仍是高效选择。理解和掌握此技术对前端开发者至关重要。**
|
2天前
|
前端开发 开发者 容器
CSS进阶-盒模型调整:box-sizing
【6月更文挑战第14天】`box-sizing`属性在CSS中调整盒模型行为,让元素宽度和高度包含内容、内边距和边框。默认是`content-box`,仅计算内容区,而`border-box`则包含所有。不一致的布局、预期尺寸不符和复杂计算错误是常见问题。使用`* { box-sizing: border-box; }`可简化布局,确保元素尺寸直观一致。了解和正确使用`box-sizing`能提升布局效率和准确性。
|
3天前
|
前端开发 JavaScript 开发者
CSS进阶-CSS变量
【6月更文挑战第13天】本文介绍了CSS变量(Custom Properties)的基本概念、应用场景和常见问题。通过声明与使用示例,展示了如何定义和引用变量。文章讨论了兼容性、作用域、错误引用及JavaScript交互等易错点,并提供了相应的解决方案。此外,还分享了实践技巧,如模块化色彩系统、响应式设计和动画制作。通过学习,开发者能更好地利用CSS变量提高样式灵活性和维护性。
|
3天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
9天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
18 1
|
9天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
24 1
|
30天前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅