css3背景颜色渐变属性

最新推荐文章于 2024-04-12 10:32:21 发布

Nibaoshi

最新推荐文章于 2024-04-12 10:32:21 发布

阅读量439

点赞数 2

分类专栏：渐变文章标签： css3

本文链接：https://blog.csdn.net/Nibaoshi/article/details/104739757

版权

渐变专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当我们了解了渐变属性后，就不用再使用图片，从而可以减少所占空间

css3中的渐变分为线性渐变和径向渐变
1.线性渐变：

（1）上下的渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 500px;
				height: 300px;
				margin: 100px auto;
				border: 1px solid #000;
				background-image: linear-gradient(red,yellow);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
（2 ）左右的渐变

background-image: linear-gradient(to right, red,yellow);

在这里插入图片描述
（3）对角渐变

background-image: linear-gradient(to bottom right, red,yellow);

在这里插入图片描述
无论是上下渐变或是左右渐变亦或是对角渐变我们都可以用角度来代替
例如：0deg 就是自上到下的渐变，90deg就是自左到右的渐变，45deg就是从左下角到右上角的渐变

background-image: linear-gradient(45deg, red,yellow);

在这里插入图片描述
颜色渐变的位置大小默认是平分的，如果想定义某个颜色的大小或位置可以使用%：

background-image: linear-gradient(45deg, red 0,red 20%, green 40%, blue 50%);

在这里插入图片描述
2.径向渐变
所谓的径向渐变就是这样的：

默认下径向渐变的形状是椭圆的，可以用circle将其设为圆形

background-image: radial-gradient(circle, red,yellow);

在这里插入图片描述
除此之外还可以设置位置：

background-image: radial-gradient(circle at 30% 30%, red,yellow,black);

在这里插入图片描述
以及渐变颜色的大小

background-image: radial-gradient(circle at 30% 30%, red 10%,yellow 30%,black 60%);

在这里插入图片描述
以上就是关于渐变的内容

Nibaoshi

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3背景颜色渐变属性

当我们了解了渐变属性后，就不用再使用图片，从而可以减少所占空间css3中的渐变分为线性渐变和径向渐变1.线性渐变：（1）上下的渐变<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="tex...
复制链接

扫一扫