【CSS3】渐变背景

最新推荐文章于 2022-07-17 07:34:13 发布
最新推荐文章于 2022-07-17 07:34:13 发布
阅读量209 收藏 1
点赞数
分类专栏： CSS3 html5+css3入门学习过程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/107496466
版权

文章目录

一、线性渐变

1. 渐变方向

可设值
值描述
to top从下 向上 渐变
to bottom从上 向下 渐变
to left从右 向左 渐变
to right从左 向右 渐变
to top left（顺序可换）从右下 向左上对角 渐变（不等于 - 45°）
to top right（顺序可换）从左下 向右上对角 渐变（不等于 45°）
to bottom left（顺序可换）从右上 向左下对角 渐变（不等于 - 135°）
to bottom right（顺序可换）从左上 向右下对角 渐变（不等于 135°）
0°从下 向上 渐变
90°从左 向右 渐变
180°从上 向下 渐变
-90° 或 270°从右 向左 渐变
45°从左下向右上渐变（区别 to top right）
-45° 或 315°从右下向左上渐变（区别 to top left）
135°从左上向右下渐变（区别 to bottom right）
-135° 或 225°从右上向左下渐变（区别 to bottom left）

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin-right: 10px;}
		.box {width: 248px;height: 148px;}
		.lg-tb {background-image: linear-gradient(red, yellow, blue);}
		.lg-tt {background-image: linear-gradient(to top, red, yellow, blue);}
		.lg-tr {background-image: linear-gradient(to right, red, yellow, blue);}
		.lg-tl {background-image: linear-gradient(to left, red, yellow, blue);}
		.lg-tbr {background-image: linear-gradient(to bottom right, red, yellow, blue);}
		.lg-45 {background-image: linear-gradient(45deg, red, yellow, blue);}
		.lg-n45 {background-image: linear-gradient(-45deg, red, yellow, blue);}
		.lg-135 {background-image: linear-gradient(135deg, red, yellow, blue);}
		.lg-n135 {background-image: linear-gradient(-135deg, red, yellow, blue);}
		.lg-0 {background-image: linear-gradient(0deg, red, yellow, blue);}
	</style>
</head>
<body>
	<div style="overflow: hidden;">
		<h2>指向</h2>
		<div class="wrap">
			<h4>从上到下（默认）</h4>
			<div class="box lg-tb"></div>
		</div>
		<div class="wrap">
			<h4>从下到上（to top）</h4>
			<div class="box lg-tt"></div>
		</div>
		<div class="wrap">
			<h4>从左到右（to right）</h4>
			<div class="box lg-tr"></div>
		</div>
		<div class="wrap">
			<h4>从右到左（to left）</h4>
			<div class="box lg-tl"></div>
		</div>
		<div class="wrap">
			<h4>左上到右下（to bottom right）</h4>
			<div class="box lg-tbr"></div>
		</div>
	</div>
	<div style="overflow: hidden;">
		<h2>角度</h2>
		<div class="wrap">
			<h4>45°</h4>
			<div class="box lg-45"></div>
		</div>
		<div class="wrap">
			<h4>-45°</h4>
			<div class="box lg-n45"></div>
		</div>
		<div class="wrap">
			<h4>135°</h4>
			<div class="box lg-135"></div>
		</div>
		<div class="wrap">
			<h4>-135°</h4>
			<div class="box lg-n135"></div>
		</div>
		<div class="wrap">
			<h4>0°</h4>
			<div class="box lg-0"></div>
		</div>
	</div>
</body>
</html>

2. 节点分布

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin-right: 10px;}
		.box {width: 248px;height: 148px;}
		.lg {background-image: linear-gradient(red, yellow, blue, green, purple);}
		.lg-ratio {background-image: linear-gradient(red 5%, yellow 15%, blue 40%, green 65%, purple 90%);}
	</style>
</head>
<body>
	<div style="overflow: hidden;">
		<div class="wrap">
			<h3>均匀（默认）</h3>
			<div class="box lg"></div>
		</div>
		<div class="wrap">
			<h3>不均匀</h3>
			<div class="box lg-ratio"></div>
		</div>
	</div>
</body>
</html>

3. 重复线性渐变

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin-right: 10px;}
		.box {width: 248px;height: 148px;}
		.lg-tb {background-image: repeating-linear-gradient(red, yellow 10%, blue 20%);}
		.lg-tt {background-image: repeating-linear-gradient(to top, red, yellow 10%, blue 20%);}
		.lg-tr {background-image: repeating-linear-gradient(to right, red, yellow 10%, blue 20%);}
		.lg-tl {background-image: repeating-linear-gradient(to left, red, yellow 10%, blue 20%);}
		.lg-tbr {background-image: repeating-linear-gradient(to bottom right, red, yellow 10%, blue 20%);}
		.lg-45 {background-image: repeating-linear-gradient(45deg, red, yellow 10%, blue 20%);}
		.lg-n45 {background-image: repeating-linear-gradient(-45deg, red, yellow 10%, blue 20%);}
		.lg-135 {background-image: repeating-linear-gradient(135deg, red, yellow 10%, blue 20%);}
		.lg-n135 {background-image: repeating-linear-gradient(-135deg, red, yellow 10%, blue 20%);}
		.lg-0 {background-image: repeating-linear-gradient(0deg, red, yellow 10%, blue 20%);}
	</style>
</head>
<body>
	<div style="overflow: hidden;">
		<h2>方向</h2>
		<div class="wrap">
			<h4>从上到下（默认）</h4>
			<div class="box lg-tb"></div>
		</div>
		<div class="wrap">
			<h4>从下到上（to top）</h4>
			<div class="box lg-tt"></div>
		</div>
		<div class="wrap">
			<h4>从左到右（to right）</h4>
			<div class="box lg-tr"></div>
		</div>
		<div class="wrap">
			<h4>从右到左（to left）</h4>
			<div class="box lg-tl"></div>
		</div>
		<div class="wrap">
			<h4>左上到右下（to bottom right）</h4>
			<div class="box lg-tbr"></div>
		</div>
	</div>
	<div style="overflow: hidden;">
		<h2>角度</h2>
		<div class="wrap">
			<h4>45°</h4>
			<div class="box lg-45"></div>
		</div>
		<div class="wrap">
			<h4>-45°</h4>
			<div class="box lg-n45"></div>
		</div>
		<div class="wrap">
			<h4>135°</h4>
			<div class="box lg-135"></div>
		</div>
		<div class="wrap">
			<h4>-135°</h4>
			<div class="box lg-n135"></div>
		</div>
		<div class="wrap">
			<h4>0°</h4>
			<div class="box lg-0"></div>
		</div>
	</div>
</body>
</html>

二、径向渐变

1. 可选属性值【shape size at position】

background-image: repeating-radial-gradient(shape size at position, color1, color2, ...);
可设值
值描述
shape 圆的形状
ellipse椭圆（默认）
circle正圆
size 半径大小
farthest-corner圆心到 最远角 的距离作为半径（默认）
farthest-side圆心到 最远边 的距离作为半径
closest-corner圆形到 最近角 的距离作为半径
closest-side圆心到 最近边 的距离作为半径
position 圆心的位置
center盒子中间为圆心（默认）
top盒子上边为圆心
bottom盒子下边为圆心
left盒子左边为圆心
right盒子右边为圆心
top left（顺序可换）盒子左上角为圆心
top right（顺序可换）盒子右上角为圆心
bottom left（顺序可换）盒子左下角为圆心
bottom right（顺序可换）盒子右下角为圆心
x y【可负值】基于父元素的水平与垂直坐标（px、cm等尺寸单位）
如："0 0" 表示左上角，设置单值 [默认 x]，另一个值 [即 y] 默认为 "center"

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin: 0 10px 10px 0;}
		.box {width: 308px;height: 148px;}
		.a {background: rgba(220, 10, 160, 0.4);}
		.b {background: rgba(20, 30, 230, 0.4);}
		.c {background: rgba(255, 0, 140, 0.4);}
		.n-f {float: none;background: rgba(0, 230, 230, 0.4);}
		.e {background: rgba(20, 100, 0, 0.4);}
		.rg-aa {background-image: radial-gradient(ellipse farthest-corner at center, red, yellow, blue);}
		.rg-ab {background-image: radial-gradient(ellipse farthest-corner at top, red, yellow, blue);}
		.rg-ac {background-image: radial-gradient(ellipse farthest-corner at right, red, yellow, blue);}
		.rg-ba {background-image: radial-gradient(ellipse farthest-side at center, red, yellow, blue);}
		.rg-bb {background-image: radial-gradient(ellipse closest-corner at center, red, yellow, blue);}
		.rg-bc {background-image: radial-gradient(ellipse closest-side at center, red, yellow, blue);}
		.rg-ca {background-image: radial-gradient(circle farthest-corner at center, red, yellow, blue);}
		.rg-cb {background-image: radial-gradient(circle farthest-corner at top, red, yellow, blue);}
		.rg-cc {background-image: radial-gradient(circle farthest-corner at right, red, yellow, blue);}
		.rg-da {background-image: radial-gradient(circle farthest-side at center, red, yellow, blue);}
		.rg-db {background-image: radial-gradient(circle closest-corner at center, red, yellow, blue);}
		.rg-dc {background-image: radial-gradient(circle closest-side at center, red, yellow, blue);}
		.rg-tl {background-image: radial-gradient(ellipse farthest-corner at top left, red, yellow, blue);}
		.rg-0 {background-image: radial-gradient(ellipse farthest-corner at 0px, red, yellow, blue);}
		.rg-310-150 {background-image: radial-gradient(ellipse farthest-corner at 310px 150px, red, yellow, blue);}
		.rg-n310-n150 {background-image: radial-gradient(ellipse farthest-corner at -310px -150px, red, yellow, blue);}
	</style>
</head>
<body>
	<div style="float: left;">
		<div style="overflow: hidden;">
			<div class="wrap a">
				<p>ellipse farthest-corner at center（默认）</p>
				<div class="box rg-aa"></div>
			</div>
			<div class="wrap a">
				<p>ellipse farthest-corner at top</p>
				<div class="box rg-ab"></div>
			</div>
			<div class="wrap a">
				<p>ellipse farthest-corner at right</p>
				<div class="box rg-ac"></div>
			</div>
		</div>
		<div style="overflow: hidden;">
			<div class="wrap b">
				<p>ellipse farthest-side at center</p>
				<div class="box rg-ba"></div>
			</div>
			<div class="wrap b">
				<p>ellipse closest-corner at center</p>
				<div class="box rg-bb"></div>
			</div>
			<div class="wrap b">
				<p>ellipse closest-side at center</p>
				<div class="box rg-bc"></div>
			</div>
		</div>
		<div style="overflow: hidden;">
			<div class="wrap c">
				<p>circle farthest-corner at center</p>
				<div class="box rg-ca"></div>
			</div>
			<div class="wrap c">
				<p>circle farthest-corner at top</p>
				<div class="box rg-cb"></div>
			</div>
			<div class="wrap c">
				<p>circle farthest-corner at right</p>
				<div class="box rg-cc"></div>
			</div>
		</div>
	</div>
	<div style="float: left;">
		<div class="wrap n-f">
			<p>circle farthest-side at center</p>
			<div class="box rg-da"></div>
		</div>
		<div class="wrap n-f">
			<p>circle closest-corner at center</p>
			<div class="box rg-db"></div>
		</div>
		<div class="wrap n-f">
			<p>circle closest-side at center</p>
			<div class="box rg-dc"></div>
		</div>
	</div>
	<div>
		<div class="wrap e">
			<p>以左上角为圆心</p>
			<div class="box rg-tl"></div>
		</div>
		<div class="wrap e">
			<p>单值 0，即 x 轴（y 轴自动为 "center"）</p>
			<div class="box rg-0"></div>
		</div>
		<div class="wrap e">
			<p>310px 150px（等于宽高时，为右下角）</p>
			<div class="box rg-310-150"></div>
		</div>
		<div class="wrap e">
			<p>-310px -150px（负值时，向左/上偏移）</p>
			<div class="box rg-n310-n150"></div>
		</div>
	</div>
</body>
</html>

2. 节点分布

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin: 0 10px 10px 0;}
		.box {width: 308px;height: 148px;}
		.rg-a {background-image: radial-gradient(ellipse farthest-corner at center, red, yellow, blue);}
		.rg-b {background-image: radial-gradient(ellipse farthest-corner at center, red 20%, yellow 30%, blue 65%);}
	</style>
</head>
<body>
	<div style="overflow: hidden;">
		<div class="wrap">
			<p>均匀</p>
			<div class="box rg-a"></div>
		</div>
		<div class="wrap">
			<p>不均匀</p>
			<div class="box rg-b"></div>
		</div>
	</div>
</body>
</html>

3. 重复径向渐变

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin: 0 10px 10px 0;}
		.box {width: 308px;height: 148px;}
		.a {background: rgba(220, 10, 160, 0.4);}
		.b {background: rgba(20, 30, 230, 0.4);}
		.c {background: rgba(255, 0, 140, 0.4);}
		.n-f {float: none;background: rgba(0, 230, 230, 0.4);}
		.rg-aa {background-image: repeating-radial-gradient(ellipse farthest-corner at center, red 5%, yellow 10%, blue 15%);}
		.rg-ab {background-image: repeating-radial-gradient(ellipse farthest-corner at top, red 5%, yellow 10%, blue 15%);}
		.rg-ac {background-image: repeating-radial-gradient(ellipse farthest-corner at right, red 5%, yellow 10%, blue 15%);}
		.rg-ba {background-image: repeating-radial-gradient(ellipse farthest-side at center, red 5%, yellow 10%, blue 15%);}
		.rg-bb {background-image: repeating-radial-gradient(ellipse closest-corner at center, red 5%, yellow 10%, blue 15%);}
		.rg-bc {background-image: repeating-radial-gradient(ellipse closest-side at center, red 5%, yellow 10%, blue 15%);}
		.rg-ca {background-image: repeating-radial-gradient(circle farthest-corner at center, red 5%, yellow 10%, blue 15%);}
		.rg-cb {background-image: repeating-radial-gradient(circle farthest-corner at top, red 5%, yellow 10%, blue 15%);}
		.rg-cc {background-image: repeating-radial-gradient(circle farthest-corner at right, red 5%, yellow 10%, blue 15%);}
		.rg-da {background-image: repeating-radial-gradient(circle farthest-side at center, red 5%, yellow 10%, blue 15%);}
		.rg-db {background-image: repeating-radial-gradient(circle closest-corner at center, red 5%, yellow 10%, blue 15%);}
		.rg-dc {background-image: repeating-radial-gradient(circle closest-side at center, red 5%, yellow 10%, blue 15%);}
	</style>
</head>
<body>
	<div style="float: left;">
		<div style="overflow: hidden;">
			<div class="wrap a">
				<p>ellipse farthest-corner at center（默认）</p>
				<div class="box rg-aa"></div>
			</div>
			<div class="wrap a">
				<p>ellipse farthest-corner at top</p>
				<div class="box rg-ab"></div>
			</div>
			<div class="wrap a">
				<p>ellipse farthest-corner at right</p>
				<div class="box rg-ac"></div>
			</div>
		</div>
		<div style="overflow: hidden;">
			<div class="wrap b">
				<p>ellipse farthest-side at center</p>
				<div class="box rg-ba"></div>
			</div>
			<div class="wrap b">
				<p>ellipse closest-corner at center</p>
				<div class="box rg-bb"></div>
			</div>
			<div class="wrap b">
				<p>ellipse closest-side at center</p>
				<div class="box rg-bc"></div>
			</div>
		</div>
		<div style="overflow: hidden;">
			<div class="wrap c">
				<p>circle farthest-corner at center</p>
				<div class="box rg-ca"></div>
			</div>
			<div class="wrap c">
				<p>circle farthest-corner at top</p>
				<div class="box rg-cb"></div>
			</div>
			<div class="wrap c">
				<p>circle farthest-corner at right</p>
				<div class="box rg-cc"></div>
			</div>
		</div>
	</div>
	<div style="float: left;">
		<div class="wrap n-f">
			<p>circle farthest-side at center</p>
			<div class="box rg-da"></div>
		</div>
		<div class="wrap n-f">
			<p>circle closest-corner at center</p>
			<div class="box rg-db"></div>
		</div>
		<div class="wrap n-f">
			<p>circle closest-side at center</p>
			<div class="box rg-dc"></div>
		</div>
	</div>
</body>
</html>
iuukai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可视化CSS3渐变背景颜色代码生成插件
12-13
这是一款可以在线生成CSS3渐变背景颜色代码的可视化插件。你可以通过调节界面上给出的颜色、色相、饱和度和亮度滑块，以及渐变方向滑块来生成各种线性渐变，屏幕上会给出相应的CSS3线性渐变代码。
css3颜色渐变：css3如何实现背景颜色渐变？
lin123_00的博客
05-18 2573
为了开发网页的美观，css3背景颜色渐变是经常会用到的，那么，css3背景颜色渐变如何设置呢？本篇文章我们就来介绍关于css颜色渐变背景的设置方法。 我们要知道的是css3渐变有两种类型：css3线性渐变和css3径向渐变，下面我们就来看一下这两种css3渐变实现背景颜色渐变的效果是怎样的。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手.
CSS3新增的渐变背景，你了解多少？
湮顾千古的博客
02-11 2991
CSS3为背景了线性渐变支持，这样就允许开发者进行更多灵活的背景设置。 1.使用line-gradient设置线性渐变 CSS3为线性渐变提供了line-gradient函数，linear-gradient() 用于创建一个线性渐变的 "图像"。语法格式如下所示： line-gradient（方向？ 颜色列表） 上面语法中的方向用于指定线性渐变的方向，该方向可以省略。如果省略指定方向，线...
css3背景颜色渐变属性
u012746918的博客
07-17 1166
css3背景颜色渐变属性
css3背景颜色渐变属性（Gradients）
DevOps海洋的渔夫@专栏
07-25 2万+
在项目中有很多地方可以用到背景色的渐变，例如：左侧菜单栏的背景色，顶部导航栏背景色等等。 CSS3 渐变（Gradients） CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，...
web前端之CSS3（2）：渐变
薛定谔的猫-前端领域
05-11 982
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义 CSS3 线性渐变 语法： background: linear-gradient(dir...
纯css3渐变背景动画特效.zip
最新发布
10-15
非常实用好看的特效代码，可以完美运行，可以二次修改！
css3实现背景动态渐变效果
11-21
本次案例为（背景颜色渐变），运用css3就能实现背景颜色渐变的效果； HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 渐变——天际线</title...
CSS3蓝色渐变几何背景特效
06-24
CSS3蓝色渐变几何背景特效是一款简单大气的文字背景样式布局代码。
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
09-25
使用CSS3 的背景渐变 -webkit-gradient ，用一个背景渐变的 DIV 代替图片。下面是实现效果示例，相比以上方案优点是不使用图片，减小请求量和流量
css3网页动态渐变背景动画特效
06-11
纯css3实现一款简单的网页动态渐变背景动画特效，渐变一般是两种颜色，这个可以设置多种渐变颜色。
CSS渐变背景看这一篇就够了
热门推荐
Mq_sir的博客
11-01 6万+
CSS渐变背景看这一篇就够了 在我们自己设计网页的时候，为了好看美观，颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景，和一些常用的颜色网站。 CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩，看能玩出什么花来。 CSS 定义了两种渐变类型： 一、线性渐变（向下/向上/向左/向右/对角线） 我们通过属性 linear-gradient来这样定义一个线性渐变。 background-image: linear-gradient( 方向
CSS3实现渐变背景
一名高级工程师的博客
07-08 1187
定义与用法css3的linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向(指定为一个角度)的渐变效果，如果不指定方向，默认从上到下渐变。/* 从上到下，蓝色渐变到红色 */linear-gradient(blue, red);/* 渐变...
CSS3 渐变背景详解
weixin_44793212的博客
11-08 403
????渐变背景 详解 ！ W3C 与 2010年11月份 正式支持渐变背景样式，背景图像源可以定义为渐变背景 渐变背景包括 线性渐变和 径向渐变俩种类型 1.线性渐变 创建一个线性渐变 只需要两个颜色 ，也可以选择设置一个起点或一个方向，用法： linear-gradient (angle , color-stop1 , color-stop2 , …) angle : 渐变方向 取值为角度或者关...
background:rgba()
Clownfishl的博客
03-12 2万+
RGBA
CSS3背景渐变
JJ_Smilewang的博客
04-05 1万+
我们经常可以看到有些背景色并不是纯色，而是好看的渐变色，css3知我懂我，给我们提供了制作渐变背景色的属性。 渐变主要包括线性渐变和径向渐变，接下来逐一介绍用法： 1.线性渐变 线性渐变--linear gradients，表示颜色沿着一条直线过渡，比如从左到右，从右到左，从上到下等。 1.1 语法： background: linear-gradient(position , color1 ,color2, ....)； /* position 渐变方向，color1 第一种颜色 co
CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。
xqiitan的专栏
03-07 9559
CSS3中的渐变实现（线性渐变、径向渐变） CSS3中的background新增属性实现，常见页面效果。 CSS3中的图片边框的基本用法 CSS3中的transition属性，实现过渡效果。 CSS3中的transfrom属性，实现 2d变换效果。 渐变：是css3中比较丰富多彩的一个特性，通过渐变可以实现许多绚丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可拓展性。可分为线性渐变、...
Css3 背景颜色渐变属性（Gradients）
Tongyao
12-24 1224
在项目中有很多地方可以用到背景色的渐变，例如：左侧菜单栏的背景色，顶部导航栏背景色等等。 CSS3 渐变（Gradients） CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear
移动开发之css3实现背景几种渐变效果
祈澈菇凉
03-07 8558
移动端背景渐变，非常的年轻，符合90后年轻一代的审美，css3的这个渐变目前主要是应用在手机前端领域。 产品设计中使用渐变色的好处： 1：观众不至于眼睛过于疲劳（如果是浅色背景，3个小时下来极容易造成观众闭上眼睛还有残影，眼睛会极度疲劳）。 2：优雅而低调的深浅色调: 3：纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感 4：稍微加点渐变可以让纯色层显得更细腻，不那么单调。画面显...
css3渐变背景颜色动画
07-14
CSS3渐变背景颜色动画是通过使用CSS3的transition和animation属性来实现的。首先，我们可以使用linear-gradient函数定义一个渐变背景颜色： div { background: linear-gradient(to right, red, blue); } 这将创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值