CSS3渐变属性详解

渐变属性

线性渐变

概念:线性渐变,指的是在一条直线上进行的渐变。在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色

语法:

css 复制代码
background:linear-gradient(渐变角度,开始颜色,结束颜色);

渐变角度

线性渐变的"渐变角度"取值有两种:

  • 一种是使用角度(单位为deg)

  • 另一种是使用关键字。

    关键字取值

属性值 对应角度 说明
to top 0deg 从下到上
to bottom 180deg 从上到下(默认值)
to left 270deg 从右到左
to right 90deg 从左到右
to top left 从右下角到左上角(斜对角)
to top right 从左下角到右上角(斜对角)

注意:未设置渐变角度时,会默认为"180deg",等同于"to bottom"。

方向图表

颜色值

"开始颜色"表示起始颜色,"结束颜色"顾名思义表示最后一个颜色值。

开始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用英文逗号","隔开

实例

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性渐变</title>
		<style>
			.main{
				width:600px;
				display:flex;
			}
			div{
				width:100px;
				height:100px;
				margin-left:20px;
			}
			.demo{
				background:linear-gradient(red,yellow);
			}
			.demo1{
				background:linear-gradient(red 70%,yellow);
			}
			.demo2{
				background:linear-gradient(to right,red 70%,yellow);
			}
			.demo3{
				background:linear-gradient(to right bottom,red,yellow);
			}
			.demo4{
				background:linear-gradient(30deg,red,yellow);
			}
			.demo5{
				background:linear-gradient(0deg,red,yellow);
			}
		</style>
	</head>
	<body>
		<div class="main">
		<!-- 默认渐变 -->
		<div class="demo"></div>
		<!--默认情况西,设置红色在元素70%的位置之后开始渐变-->
		<div class="demo1"></div>
		<!--设置一个从左到右的渐变背景色 -->
		<div class="demo2"></div>
		<!-- 创建一个从左上到右下的渐变颜色 -->
		<div class='demo3'></div>
		<!-- 创建一个30度角的线性渐变 -->
		<div class="demo4"></div>
		<!-- 创建一个0度角的线性渐变 -->
		<div class="demo5"></div>
		
		</div>
	</body>
</html>

运行结果

径向渐变

概念:径向渐变,指的是颜色从内到外进行的圆形渐变(从中间往外拉,像圆一样)。

径向渐变是圆形渐变或椭圆渐变,颜色不再是沿着一条直线渐变,而是起始颜色会从一个中心点开始向所有方向渐变

语法:

css 复制代码
background:radial-gradient(渐变形状 圆心位置,开始颜色,...,结束颜色);

属性值

  • 渐变形状:可选值,表示用于定义形状大小
  • 圆心位置:可选值,表示用于定义圆心位置
  • 开始颜色:必选值,用于定义起始颜色
  • 结束颜色:必选值,用于定义结束颜色

说明:圆心位置和渐变形状都是可选值。如果省略,则表示采用默认值。开始颜色和结束颜色都是必选值,可以有多个颜色值

圆心位置

圆心位置用于定义径向渐变的"中心位置",可以使用"at"加上关键词或参数值来定义径向渐变的圆心位置。取值跟background-position属性取值一样。

常用取值有两种:一种是"长度值"(如10px),另一种是"关键字(如top)".

属性值/关键字 说明
像素值/百分比 圆心的水平和垂直坐标,可以为负值
center 中部(默认值)
top 顶部
bottom 底部
left 左部
right 右部
left center 靠左居中
center center 正中
right center 靠右居中
bottom left 左下
bottom center 靠下居中
bottom right 右下

渐变形状

渐变形状用于定义径向渐变的"形状"

参数取值

属性值 说明
像素值/百分比 渐变形状的水平和垂直半径
ellipse 椭圆形(默认值)
circle 圆形

颜色值

参数开始颜色用于定义径向渐变的起始颜色 ,而参数结束颜色用于定义径向渐变的结束颜色

此外,径向渐变可以接收一个值列表,可以同时定义多种颜色的径向渐变,各颜色值之间用英文逗号(,)隔开

实例:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>径向渐变</title>
		<style>
			.main{
				width:600px;
				display:flex;
			}
			div{
				width:100px;
				height:100px;
				margin-left:20px;
			}
			.demo3{
				width:160px;
				height:100px;
				line-height:200px;
				border-radius:50px 50px ;
			}
			.demo{
				
				background:radial-gradient(red,blue);
			}
			.demo1{
				background:radial-gradient(circle,red,blue);
			}
			.demo2{
				background:radial-gradient(circle,red 5%,blue 20%);
			}
			.demo3{
				background:radial-gradient(circle at center, orange 20%,yellow 50%);
			}
		</style>
	</head>
	<body>
		<div class="main">
		<!-- 创建一个从红色到蓝色的径向渐变 -->
		<div class="demo"></div>
		<!--创建一个真正的圆形渐变 -->
		<div class="demo1"></div>
		<div class="demo2"></div>
		<!-- 创建一个鸡蛋 -->
		<div class="demo3"></div>
		</div>
	</body>
</html>

运行结果

相关推荐
可缺不可滥5 分钟前
前端 性能优化 (图片与样式篇)
前端·性能优化
Bug从此不上门7 分钟前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
拼图20935 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉40 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
星叔1 小时前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
编程老船长1 小时前
第18章 从零开始:春节门联网页设计,用DIV+CSS打造传统与现代的完美融合
前端·css·html
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か2 小时前
打字机效果显示
前端·vue3·antv
郑小憨2 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍(基础介绍 二)
开发语言·前端·javascript·npm·node.js
嚣张农民2 小时前
在 WebSocket 连接中出现错误时,如何处理和捕获错误?
前端·javascript·面试