CSS3新增属性（渐变）

最新推荐文章于 2024-04-21 14:20:30 发布

森屿海港-

最新推荐文章于 2024-04-21 14:20:30 发布

阅读量139

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/weixin_45163951/article/details/119151031

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css3新增属性因为没有w3c收纳，可能会有兼容为题

渐变

渐变其实就是让两个或多个指定的颜色之间显示平稳的过度

渐变分为线性渐变（就是朝一个方向颜色发生变化）和径向渐变（就是从一个点扩发行的变换）

线性渐变

属性为：linear-gradient（direction,color1,color2,...colorn）

先讲一下两个颜色的渐变（常见）

渐变的第一个值direction可以有

a、从上到下。to bottom

b、从下到上。to top

c、从左到右。to right

d、从右到左、 to left

e、对角例如（to right bottom）从左上到右下角

f、角度。 45deg

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性渐变</title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				float: left;
			}
			.to_top{
				background: linear-gradient(to top,red 10%,blue 80%);
			}
			.to_bottom{
				background: linear-gradient(to bottom,yellow 10%,blue 80%);
			}
			.to_left{
				background: linear-gradient(to left,red 10%,green 80%);
			}
			.to_right{
				background: linear-gradient(to right,pink 10%,green 80%);
			}
			.to_right_bottom{
				background: linear-gradient(to right bottom,red 10%,black 80%);
			}
			.deg{
				background: linear-gradient(45deg,orange 10%,black 80%);
			}
		</style>
	</head>
	<body>
		<div class="to_top">
			从下向上
		</div>
		<div class="to_bottom">
			从上向下
		</div>
		<div class="to_left">
			从右向左
		</div>
		<div class="to_right">
			从左向右
		</div>
		<div class="to_right_bottom">
			对角方向
		</div>
		<div class="deg">
			角度值
		</div>
	</body>
</html>

效果图：

里面的颜色后面有百分值，百分值代表颜色所占的整个盒子的百分比（如果不写，代表两个颜色五五分），本代码只写了两个颜色的变换，如果加颜色，直接在属性的后面添加即可

线性的重复渐变

属性：repeating-linear-gradient(direction, color1 百分比，color2 百分比)

代码：

<div class="deg">
			重复渐变
		</div>

//css样式
.deg{
			background: repeating-linear-gradient(90deg, red 10%,blue 20%);
			}

效果图

径向渐变

可以将颜色沿元素中心点向外扩散

属性：radial-gradient(center, shape size, start-color, …. Last-color)

解释：指定开始的中心点，形状（椭圆或者圆形），大小。

中心点：百分比方式，默认50%， 50%。

形状：椭圆ellipse, 圆形circle。

大小：closest-side(最近的边)， closest-corner(最近的角)，farthest-side(最远的边),farthest-corner(最远的角)

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>径向渐变</title>
		<style type="text/css">
			.radial{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				background: radial-gradient(circle,yellow 10%,red 20%);
				
			}
		</style>
	</head>
	<body>
		<div class="radial"></div>
	</body>
</html>

效果图：

径向重复渐变

属性：repeating-radial-gradient(center, shape size, start-color, …. Last-color)

属性值同上

效果图如下：

森屿海港-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增属性（渐变）

css3新增属性因为没有w3c收纳，可能会有兼容为题渐变渐变其实就是让两个或多个指定的颜色之间显示平稳的过度渐变分为线性渐变（就是朝一个方向颜色发生变化）和径向渐变（就是从一个点扩发行的变换）线性渐变属性为：linear-gradient（direction,color1,color2,...colorn）先讲一下两个颜色的渐变（常见）渐变的第一个值direction可以有a、从上到下。to bottomb、从下到上。to topc、从左到右。to rightd、
复制链接

扫一扫

专栏目录