【css3】03-css3新特性之颜色渐变

目录

[1 线性渐变](#1 线性渐变)

[2 径向渐变](#2 径向渐变)


1 线性渐变

☞ 线性渐变:

  1. 开始颜色和结束颜色

  2. 渐变的方向

  3. 渐变的范围

background-image: linear-gradient(

to right, //渐变的方向

red, //开始颜色

blue //结束颜色

);

备注:

表示方向:

  1. to + right | top | bottom | left

  2. 通过角度表示一个方向

0deg [从下向上渐变]

90deg【从左向右】

复制代码
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.line {
			height: 300px;
			/* 			width: 300px; */
			/* 实现线性渐变 一般设置为背景*/
			background-image: linear-gradient(
					/*从左到右渐变*/
					to right,
					/*渐变的方向*/
					/* 135deg, */
					/* 第一个从20%开始渐变; */
					red 20%,
					blue 20%,
					blue 40%,
					red 40%,
					red 60%,
					blue 60%,
					blue 80%,
					red 80%);

			/* background-size: 200px 300px; */
		}
	</style>
</head>

<body>

	<div class="line"></div>
</body>

135deg,//渐变方向

background-size: 200px 300px;

2 径向渐变

☞ 径向渐变:

/* 径向渐变 */

background-image: radial-gradient(

100px at center, //半径,原点位置

red,

blue

复制代码
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box {
			width: 300px;
			height: 300px;
			border: 1px solid red;
			margin: 50px auto;
			/* 径向渐变 */
			background-image: radial-gradient(
				 100px at center,
				 red,
				 blue
			);
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
  1. radial-gradient(): 这是一个函数,用于定义径向渐变。

  2. 100px at center: 这是定义渐变形状和位置的部分。

    • 100px: 定义了渐变中心到颜色停止位置的最大距离(或称为半径)。这里设置为100像素。
    • at center: 定义了渐变中心的位置,这里设置为"中心",意味着渐变是从元素的中心点开始的。
  3. red, blue: 这是定义渐变颜色的部分。

    • red: 渐变开始的颜色。在这个例子中,红色在中心点处开始。
    • blue: 渐变结束的颜色。随着距离的增加,颜色从红色逐渐过渡到蓝色。

因此,当这段代码应用于一个元素时,该元素的背景将从中心开始,以红色为起点,然后逐渐过渡到蓝色,直到距离中心100像素的位置。超过这个距离后,背景颜色将保持为蓝色(或更准确地说是渐变结束时的蓝色色调)。

相关推荐
伍哥的传说25 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783827 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊38 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为