首页 > 其他分享 >如何利用 CSS 渐变实现多样化背景效果

如何利用 CSS 渐变实现多样化背景效果

时间:2024-09-12 22:20:38浏览次数:9  
标签:blue linear gradient 渐变 CSS top 多样化 red

前言

总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果,通过调整渐变类型和设置,你可以轻松实现从简单到复杂的各种背景效果。
请添加图片描述
请添加图片描述

在日常开发中 有很多需要用到渐变的地方,这片文章来总结一下
来看MDN是如何说的
CSS 渐变由 [<gradient>] 数据类型表示,它是 [<image>] 的一种特殊类型,由两种或多种颜色之间的渐变过渡构成。

一共有三种类型的渐变

线性渐变:linear-gradient()创建

线性渐变 是最常见的一种渐变方式,它沿着指定的轴线从一种颜色过渡到另一种颜色。你可以控制渐变的方向、颜色停留点和渐变的角度,创造出各种效果,例如从左到右、从上到下或对角线方向的渐变。

* 渐变轴为 45 度,从蓝色渐变到红色 */

linear-gradient(45deg, blue, red);

* 渐变轴为 45 度,从蓝色渐变到透明*/
linear-gradient(45deg,blue,transparent)
linear-gradient(45deg,blue,rgba(0,0,0,0))

/* 从右下到左上、从蓝色渐变到红色 */

linear-gradient(to left top, blue, red);
/*  蓝色渐变到红色再渐变到黄色 */
linear-gradient(to left top, blue, red,yellow);


/* 色标:从下到上,从蓝色开始渐变,到高度 40% 位置是绿色渐变开始,最后以红色结束 */

linear-gradient(0deg, blue, green 40%, red);

/* 色标:从下到上,从蓝色开始渐变,到高度 200px 位置是绿色渐变开始,最后以红色结束 */

linear-gradient(0deg, blue, green 200px, red);  

/* 颜色提示:从左到右的渐变,由红色开始,沿着渐变长度到 10% 的位置,然后在剩余的 90% 长度中变成蓝色 */

linear-gradient(.25turn, red, 10%, blue);

  

/* 多位置色标:45% 倾斜的渐变,左下半部分为红色,右下半部分为蓝色,中间有一条硬线,在这里渐变由红色转变为蓝色 */

linear-gradient(45deg, red 0 50%, blue 50% 100%);

径向渐变:radial-gradient()创建

径向渐变 从一个中心点向外扩展,逐渐过渡到其他颜色。你可以设置渐变的形状、大小以及中心点的位置,来实现从中心向外的渐变效果,这种效果常用于创建深度感和立体感。

/* 在容器中心的渐变,从红色开始,变成蓝色,最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)
/*65% 300px: 这是渐变的尺寸和位置设置。

65% 表示渐变的形状或大小,通常是相对于容器的宽度或高度的百分比。在这个例子中,它表示渐变的结束点距离渐变中心 65% 的位置。

300px 指渐变的半径,即从中心点到渐变的边缘的距离。

at right top: 这是渐变的起始位置。right top 表示渐变的中心点位于容器的右上角。 */

radial-gradient(60% 100px at left top, red 0, blue, green 100%) 

锥形渐变:conic-gradient()创建

没怎么使用过 本文不做展开

B站渐进色背景实现
请添加图片描述

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.layout{

width:100vw;

min-height:100vh;

background:

linear-gradient(to bottom,transparent -100px, #fff 300px),

linear-gradient(to right ,#D2EEF9,#FFD1DE)

;

}

</style>

</head>

<body>

<div class="layout"></div>

</body>

</html>

boss直聘渐变色
请添加图片描述

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">![请添加图片描述](https://i-blog.csdnimg.cn/direct/ded9580041234733bfbbc569bcbf3ec1.png)


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.layout{

width:100vw;

min-height:100vh;

background:

linear-gradient(to bottom,transparent, #fff 300px),

radial-gradient(90% 300px at left top, #95E0DC, transparent),

radial-gradient(65% 300px at right top, #D3CBFC, transparent)

;

}

  

</style>

</head>

<body>

<div class="layout"></div>

</body>

</html>

本文到此结束 更多作为自我学习 也希望对你有所帮助 会持续更新代码文章 点个赞吧

标签:blue,linear,gradient,渐变,CSS,top,多样化,red
From: https://blog.csdn.net/weixin_63625059/article/details/142111307

相关文章

  • 【CSS in Depth 2 精译_029】5.2 Grid 网格布局中的网格结构剖析(上)
    当前内容所在位置(可进入专栏查看其他译好的章节内容)第一章层叠、优先级与继承(已完结)1.1层叠1.2继承1.3特殊值1.4简写属性1.5CSS渐进式增强技术1.6本章小结第二章相对单位(已完结)2.1相对单位的威力2.2em与rem2.3告别像素思维2.4视口的相对单位2.5......
  • [CSS] z-index
    z-index不生效未设置定位z-index仅对定位元素生效,也就是说,元素必须设置了position属性为relative,absolute,fixed或sticky。如果元素的position是默认的static,z-index会失效。堆叠上下文层叠上下文是元素的一个局部层叠环境,z-index只在它所属的层叠上下文中有效......
  • 如何使用谷歌浏览器开发者工具调试CSS
    使用谷歌浏览器内置的开发者工具可以极大地简化CSS调试过程。这套工具不仅可以帮助开发者识别和修正样式问题,还能实时编辑和查看CSS变化,是前端开发不可或缺的助手。下面就给大家分析一下如何使用谷歌浏览器开发者工具调试CSS。(本文由https://www.chromexiazai.net/站点的作者......
  • [CSS] 伪元素和伪类,::before 和 :before 区别
    特点伪类伪元素用途选择元素的状态或基于结构选择元素创建虚拟的内容,操作元素的某些部分语法使用单个冒号(......
  • flex css - 在一定高度后剪辑元素而不是换行
    布局是一种用于创建灵活和响应式布局的CSS技术。它提供了一种更简单和直观的方式来排列和对齐页面元素。通过使用Flex布局,可以轻松实现水平和垂直方向上的对齐、分布和自适应调整。它还支持灵活的容器和项目的大小调整,以及对元素顺序的控制。掌握Flex布局的基础知识对于构建......
  • 在CSS中,有哪些常见的选择器优先级问题,应该如何避免?
    在CSS中,有哪些常见的选择器优先级问题,应该如何避免?来源:锦匠网页在CSS中,选择器优先级(也称为特异性)决定了多个规则冲突时,哪个规则将被应用到元素上。理解和正确处理选择器优先级问题对于前端开发者来说非常重要,因为它们直接影响到页面的最终样式。本文将探讨常见的选择器优......
  • CSS选择器的种类及其使用技巧
    CSS选择器的种类及其使用技巧来源:锦匠网页CSS选择器是CSS中用于选择页面上的元素并对其应用样式的基本工具。了解不同类型的CSS选择器及其使用技巧对于前端开发者来说至关重要,它们可以帮助你更精确地定位和样式化HTML元素。本文将介绍CSS选择器的种类及其使用技巧,并提供示......
  • 【H2O2|全栈】关于CSS(2)CSS基础(二)
    目录CSS基础知识前言准备工作选择器的组合盒模型示例网页代码后代选择器亲代选择器相邻兄弟选择器后续兄弟选择器多个元素选择器 通配符选择器优先级其他应用伪类锚链接的属性列表的属性list-style-typelist-style-positionlist-style-image伪元素表格......
  • 使用css属性—clip-path完成胶囊导航按钮
    使用css属性—clip-path完成胶囊导航按钮先看效果更多API上代码先看效果主要是为了实现胶囊内的颜色分割:更多APIclip-path属性常用的函数:API描述参数circle()创建一个圆形裁剪区域半径和圆心的坐标ellipse()创建一个椭圆形裁剪区域横轴和纵轴的半径以及圆心的坐......
  • CSS样式
    下列笔记均是来自尚硅谷张天禹的上课内容。1样式写的位置1.1行内(不推荐) 1.2内部1.3外部 1.4优先级 2css语法规范3选择器3.1 通配选择器常用于清除q样式3.2元素选择器 3.3类选择器  3.4id选择器3.5总结 3.6交集选择器3.7并集......