CSS盒子模型

最新推荐文章于 2024-07-26 08:45:03 发布

小平头＠king

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量1k

点赞数 1

分类专栏： HTML+CSS3 文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_53545557/article/details/112860644

版权

HTML+CSS3 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

一.盒子模型概述

1.认识盒子模型

所谓盒子模型就是把页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器，每个矩形都由元素的内容，内边距（Padding)、边框（Border）、和外边距（Margin)组成。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式叠加</title>
		<style type="text/css">
			.box{
				width: 200px;            /* 盒子模型的宽度 */
				height: 50px;           /*盒子模型的高度 */
				border: 15px solid red;  /* 盒子模型的边框 */
				background: #ccc;        /* 盒子模型的背景颜色 */
				padding: 30px;           /* 盒子模型的内边距 */
				margin: 20px;            /* 盒子模型的外边距 */
			}
		</style>
	</head>
	<body>
		<p class="box">盒子中包含的内容</p>
	</body>
</html

效果：在这里插入图片描述

2.`<div>`标记

div是英文division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网页分隔为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个“盒子”，可以设置外边距，内边距，宽和高，同时内部可以容纳段落、标题、表格、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div标记</title>
		<style type="text/css">
			.one{
				width: 450px;           /* 设置宽度 */
				height: 30px;           /* 设置高度 */
				line-height: 30px;      /* 设置行高 */
				background: #FCC;       /* 设置背景颜色 */
				font-size: 18px;        /* 设置字体大小 */
				font-weight: bold;      /* 设置字体加粗 */
				text-align: center;     /* 设置文本水平居中对齐 */
			}
			.two{
				width: 450px;           /* 设置宽度 */
				height: 100px;          /* 设置高度 */
				background: #0F0;       /* 设置背景颜色 */
				font-size: 14px;        /* 设置字体大小 */
				text-indent: 2em;       /* 设置首行文本缩进 */
			}
		</style>
	</head>
	<body>
		<div class="one">
			用div标记设置的标题文本
		</div>
		<div class="two">
			<p>div标记中嵌套的p标记中的文本</p>
		</div>
	</body>
</html>

效果：
在这里插入图片描述

3.盒子的宽和高

网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width 和高度属性height可以对盒子的大小进行控制。
CSS盒子模型的总宽度和总高度计算原则：

盒子的总高度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度=height+上下边距之和+上下边框高度之和+上下外边距之和

二.盒子模型相关属性

1.边框属性

在网页设计中，常常要给元素设置边框效果。CSS边框属性包括边框样式属性、边框宽度属性、边框颜色属性及边框的综合属性。同时为了进一步满足设计需求，CSS3中还增加了许多新的属性，如元角边框以及图片边框等属性。

设置内容	样式属性
边框样式	border-style:上边[右边下边左边]
边框宽度	border-width:上边[右边下边左边]
边框颜色	border-color:上边[右边下边左边]
综合设置边框	border:四边宽度四边样式四边颜色
圆角边框	border-radius:水平半径参数/垂直半径参数
图片边框	border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式

（1.）边框样式（border-style）

用于设置边框样式，格式为：

border-style：上边[右边 下边 左边]；

常用属性值有4个，分别定义不同的显示样式，如下:

solid：边框单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

使用border-style属性综合设置四边样式时，必须按照上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。以下border-width和border-color使用方法也是这样
示例：

p{border-style:dashed solid solid solid;}

（2.）边框宽度（border-width）

用于定义边框的宽度，格式：

border-width：上边[右边 下边 左边]；

单位为px使用方法如上

（3.）边框颜色（border-color）

用于定义边框的颜色，格式：

border-color：上边[右边 下边 左边]；

使用方法如上

（4.）综合设置边框

使用border-style、border-width、border-color虽然可以实现丰富的边框小效果，但是这种方式书写的代码繁琐，且不便于阅读，为此CSS提供了更简单的边框设置方式，其基本格式如下：

border：宽度 样式 颜色；

上面的设置方式中，宽度、样式、颜色的顺序不分先后，可以只指定需要设置的属性，省略的部分将取默认值（样式不能省略）。
当每一侧的边框样式都不相同，或者只需要单独定义某一侧的边框时，可以使用单侧边框的综合属性border-top、border-bottom、border-left、border-right进行设置。
例：

p{border-top:2px solid #CCC;}  定义上边框，各个值顺序任意

（5.）圆角边框

在网页设计中，经常需要设置圆角边框，border-radius属性可以将矩形边框圆角化，格式：

border-radius：参数1/参数2

此格式包含两种参数，“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，之间用“/”隔开，取值可以为像素值或百分比。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆角边框</title>
		<style type="text/css">
			img{
				width: 300px;
				height: 150px;
				border: 8px solid #6C9024;
				border-radius: 100px/50px;  /* 水平半径为100像素,垂直半径为50像素 */
			}
		</style>
	</head>
	<body>
		<img src="img/41780b221f333b1eaa2494ea3777ba8.jpg" />
	</body>
</html>

在这里插入图片描述
在使用此属性时，如果第二个参数省略，则会默认等于第一个参数，例：

border-radius：50px  (设置圆角半径50像素)

2.边距属性

（1.）内边距

在网页设计中，为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置如下：

padding-top：上内边距
padding-right：有内边距
padding-bottom：下内边距
padding-left：左内边距
padding：内边距
在上面的设置中，padding相关的属性取值可以为auto自动（默认）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比（%），实际工作中最常用的是像素值，不允许使用负值。
例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置内边距</title>
		<style type="text/css">
			.border{border: 5px solid #F60;}   /* 为图像和段落设置边框 */
			img{
				padding: 80px;                /* 图像四个方向内边距相同 */
				padding-bottom: 0;            /* 单独设置下内边距 */
				width: 89%;
				height: 500px;
			}
			p{padding: 5%;}                   /* 段落内边距为父元素宽度的5% */
		</style>
	</head>
	<body>
		<img class="border" src="img/41780b221f333b1eaa2494ea3777ba8.jpg"/>
		<p class="border">段落内边距为父元素宽度的5%</p>
	</body>
</html>

（2.）外边距

在网页设计中，用margin属性设置外边距，其用法与padding类似。
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素居中，例：

.header{width:960px; margin:0 auto;}

为了方便的控制网页中的元素，制作网页时，可使用如下代码清除元素的默认值内外边距。

*{
   padding:0;   （清除内边距）
   margin:0;    (清除外边距）
}

清除元素默认内边距和外边距样式后，浏览器边界与网页内容之间的距离消失。

3.box-shadow属性

在网页制作中，经常需要对盒子添加阴影效果，box-shadow可以轻松实现阴影的添加。格式：

box-shadow：像素1 像素2 像素3 像素4 颜色值 阴影类型；

box-shadow属性参数值：

参数值	说明
像素值1	表示元素水平阴影位置，可以为负值（必选属性）
像素值2	表示元素垂直阴影位置，可以为负值（必选属性）
像素值3	阴影模糊半径（可选属性）
像素值4	阴影扩展半径，不能为负值（可选属性）
颜色值	阴影颜色（可选属性）
阴影类型	内阴影（inset）/外阴影（默认）（可选属性）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>box-shadow属性</title>
		<style type="text/css">
			img{
				padding: 20px;
				border-radius: 50%;
				border: 1px solid #ccc;
				box-shadow: 5px 5px 10px 2px #999 inset;
				width: 300px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img src="img/41780b221f333b1eaa2494ea3777ba8.jpg"/>
	</body>
</html>

效果: 在这里插入图片描述

4.box-sizing属性

当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改width属性值，才能保证盒子总宽度不变，操作起来繁琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，格式如下：

box-sizing：content-box/border-box；

在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们解释如下：

content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding
border-box：当定义width和height时，border和padding的参数值被包含在width和height之内
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>box-shadow属性</title>
		<style type="text/css">
			.box1{
				width: 300px;
				height: 100px;
				padding-right: 10px;
				background: #F90;
				border: 10px solid #ccc;
				box-sizing: content-box;
			}
			.box2{
				width: 300px;
				height: 100px;
				padding-right: 10px;
				background: F90;
				border: 10px solid #ccc;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="box1">博主真帅</div>
		<div class="box2">博主真帅</div>
	</body>
</html>

效果：
在这里插入图片描述

三.背景属性

1.设置背景颜色

在CSS中使用background-color属性来设置网页元素的背景颜色，其属性值与文本颜色的取值一样，background-color的默认值为transparent，即背景透明，此时子元素会显示其父元素的背景。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置背景颜色</title>
		<style type="text/css">
			body{background-color: #ccc;}   /*设置网页的背景颜色*/
			h2{
				font-family: "微软雅黑";
				color: #FFF;
				background-color: #FC3;    /*设置标题的背景颜色*/
			}
		</style>
	</head>
	<body>
		<h2>博主是个帅哥</h2>
		<p>特大喜讯：博主找到女朋友了！！！</p>
	</body>
</html>

效果：
在这里插入图片描述

2.设置背景图像

背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置背景颜色</title>
		<style type="text/css">
			body{
				background-color: #ccc;     /* 设置网页的背景颜色 */
			background-image:url(img/41780b221f333b1eaa2494ea3777ba8.jpg);/* 设置背景图片 */
			}
			h2{
				font-family: "微软雅黑";
				color: #FFF;
				background-color: #FC3;    /* 设置标题的背景颜色 */
			}
		</style>
	</head>
	<body>
		<h2>博主是个帅哥</h2>
		<p>特大喜讯：博主找到女朋友了！！！</p>
	</body>
</html>

效果：
在这里插入图片描述

3.背景与图片不透明度的设置

（1.）RGBA模式

RGBA是CSS3新增的颜色模式，它是RGB颜色模式的延伸，该模式在红、绿、蓝三原色的基础上不透明度参数。格式：

rgba(r,g,b,alpha);

在上面格式中，前三个参数与RGB中的参数含义相同，alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。
例，使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景，代码如下：

p{background-color:rgba(255,0,0,0.5);}

（2.）opacity属性

在CSS3中，使用opacity属性能够使任何元素呈现出透明效果，格式：

opacity：opacityValue;

在以上格式中，opacity属性用于定义元素的不透明度，参数opacityValue表示不透明度的值，它是介于0~1的浮点数值。其中，0表示完全透明，1表示完全不透明，例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>opacity属性设置图像的透明度</title>
		<style type="text/css">
			#boxwrap{width: 330px;margin: 10px auto;border: solid 1px #FF6666;}
			img:first-child{opacity: 1;}
			img:nth-child(2){opacity: 0.8;}
			img:nth-child(3){opacity: 0.5;}
			img:nth-child(4){opacity: 0.2;}
		</style>
	</head>
	<body>
		<div id="boxwrap">
			<img src="img/41780b221f333b1eaa2494ea3777ba8.jpg" width="160" height="109">
			<img src="img/41780b221f333b1eaa2494ea3777ba8.jpg" width="160" height="109">
			<img src="img/41780b221f333b1eaa2494ea3777ba8.jpg" width="160" height="109">
			<img src="img/41780b221f333b1eaa2494ea3777ba8.jpg" width="160" height="109">
		</div>
	</body>
</html>

效果：
在这里插入图片描述

4.设置背景图像平铺

默认情况下，背景图像会自动沿着水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性取值如下：

repeat：沿水平和竖直两个方向平铺（默认值）
no-repeat：不平铺（图像位于元素的左上角，只显示一个）
repeat-x：只沿水平方向平铺
repeat-y：只沿竖直方向平铺

5.设置背景图像的位置

如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将默认以元素的左上角显示。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置背景图像的位置</title>
		<style type="text/css">
			body{
				background-image: url(img/41780b221f333b1eaa2494ea3777ba8.jpg);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div>
			<h2>博主竟然谈恋爱了</h2>
			<p>博主有点小帅</p>
		</div>
	</body>
</html>

效果：
在这里插入图片描述
如果希望背景图像出现在其他位置，就需要另一个CSS属性background-position，设置背景图像的位置。例如将上面的背景图像定义在页面的右上角，可以更改body元素的CSS样式代码：

body{
	background-image: url(img/41780b221f333b1eaa2494ea3777ba8.jpg);
	background-repeat: no-repeat;
	background-position: right top;
			}

背景图像就出现在右上角。
background-position属性的取值有多种，具体如下：
（1.）使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标，如：“background-position: 20px 20px;”
（2.）使用预定义的关键词：指定背景图像在元素中的对齐方式

水平方向值：left、center、right
垂直方向值：top、center、bottom

两个关键词的顺序任意，若只有一个值另外一个值默认为center
（3.）使用百分比：按背景图像和元素的指定点对齐

0% 0% 表示图像左上角和元素的左上角对齐
50% 50% 表示图像50%50%中心点和元素50%50%的中心点对齐
20% 30% 表示图像20%30%中心点和元素20%30%的中心点对齐
100% 100% 表示图像右下角与元素的右下角对齐，而不是图像充满元素

6.设置背景图像的固定

当网页中的内容较多时，在网页中设置的背景图像会随着页面滚动条的移动而移动，如果希望背景图像固定在屏幕的某一位置，不随着滚动条移动，可以用background-attachment属性来设置，background-attachment属性有两个属性值，分别代表不同含义：

scroll：图像随页面元素一起滚动
fixed：图像固定在屏幕上，不随页面元素滚动

7.设置背景图像的大小

运用background-size可以控制背景图像的大小，格式：

background-size：属性值1 属性值2；

在上面格式中，background-size属性可以设置一个或两个值定义背景图像的宽高，其中属性值1为必选属性值，属性值2为可选属性值。属性值可以是像素值、百分比、“cover”或“contain”关键字。

属性值	说明
像素值	设置背景图像的高度和宽度。第一个设置宽度，第二个设置高度。如果只设置一个值，则第二个值会默认为auto
百分比	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个设置高度。如果只设置一个值，则第二个会默认为auto
cover	把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
contain	把图像扩展至最大尺寸，以是其宽度和高度完全适应内容区域

8.设置背景的显示区域

在默认情况下，background-position属性值总是以元素左上角为坐标原点定位背景图像，运用CSS3中的background-origin属性可以改变这种定位方式，自定义背景图像的相对位置，格式：

background-origin：属性值；

在上面格式中，background-origin属性值有3种，分别表示不同的含义：

padding-box：背景图像相对于内边距区域来定位
border-box：背景图像相对于边框来定位
content-box：背景图像相对于内容来定位
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置背景图像的显示区域</title>
		<style type="text/css">
			p{
				width: 300px;
				height: 200px;
				border: 8px solid #bbb;
				padding: 40px;
				background-image: url(img/bg2.png);
				background-repeat: no-repeat;
				
			}
		</style>
	</head>
	<body>
		<p>博主好帅哈哈哈</p>
	</body>
</html>

效果：在这里插入图片描述
添加background-origin：content-box后，显示效果：

9.设置背景图像的裁剪区域

在CSS样式中，background-clip属性用于定义背景图像的裁剪区域，格式：

background-clip：属性值；

在格式上，background-clip和background-origin属性的取值相同，但含义不同，如下：

padding-box：从内边距向内裁剪背景
border-box：默认值，从边框区域向外裁剪背景
content-box：从内容区域向外裁剪背景
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置背景图像的裁剪区域</title>
		<style type="text/css">
			p{
				width: 300px;
				height: 200px;
				border: 8px dotted #666;
				padding: 40px;
				background-color: #CF9;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<p>
			深邃的夜，携带了众多的琐碎徘徊在临溪石径。若说，人生在世，纵然
			莫过于可悲了。苍天有泪，为何而悲，问星辰，却是那一缕心事，六分深埋
			三分寄尘埃，一分薄酒难平心中惆怅！低叹人生长路漫漫，看世间百态，烟花易冷
			，只有刹那芳华。红尘过往，万载纠结，亦喜亦悲
		</p>
	</body>
</html>

效果：在这里插入图片描述
添加background-clip：content-box效果为：

10.背景的复合属性

同边框属性一样，在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。格式：

background: [background-color] [background-image] [background-repeat]
			[background-attachment] [background-position] [background-size]
			[background-clip] [background-origin];

在上面的格式中，各个样式顺序任意，对于不需要的可以省略。

四.CSS3渐变属性

1.线性渐变

在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image：linear-gradient（参数值）；”样式实现线性渐变效果，格式：

background-image：linear-gradient（渐变角度、颜色值1、颜色值2···颜色值n）；

在上面的语法格式中，linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值，具体解释如下：

渐变角度：指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或“to”加“left”“right”“top”和“bottom”等关键词。在使用角度设定渐变起点的时候，0deg对应“to top”，90deg对应“to bottom",270deg对应”to left"，整个过程以bottom为起点顺时针旋转，当未设置渐变角度时，会默认“180deg”等同于“to bottom”
颜色值：“颜色1”表示起始颜色，“颜色n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“，”隔开。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性渐变</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-image: linear-gradient(30deg,#0f0,#00F);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果：在这里插入图片描述
在每一个颜色值后面还可以书写一个百分比数值，用于标识颜色渐变的位置，示例如下：

background-image: linear-gradient(30deg,#0f0 50%,#00F 80%);

效果：在这里插入图片描述

2.径向渐变

径向渐变是网页中另一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image：radial-gradient（参数值）；”样式可以实现径向渐变效果，其基本格式：

background-image：radial-gradient（渐变形状 圆心位置，颜色值1，颜色值2...，颜色值n）；

在上面格式中，radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值，具体介绍：

（1.）渐变形状

用来定义径向渐变的形状，其取值既可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。其中关键词主要包括两个值“circle”和“ellipse”，具体解释如下：

像素值/百分比：用于定义形状的水平和垂直半径，如“80px 50px”表示一个水平半径为80px，垂直半径为50px的椭圆
circle：指定圆形的径向渐变
ellipse：指定椭圆的径向渐变

（2.）圆心位置

圆心位置用于确定元素渐变的中心位置，使“at”加上关键词或参数值来定义径向渐变的中心位置。该属性值类似于CSS中background-position属性值，如果省略则默认为“center”该属性值主要有以下几种：

像素值/百分比：用于定义圆心的水平和垂直坐标，可以为负值
left：设置左边为径向渐变圆心的横坐标
center：设置中间为径向渐变圆心的横坐标值或纵坐标
right：设置右边为径向渐变圆心的横坐标值
top：设置顶部为径向渐变圆心的纵标值
bottom：设置底部为径向渐变圆心的纵标值

（3.）颜色值

“颜色值1”为起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，个颜色值之间用“，”隔开。
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>径向渐变</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background-image: radial-gradient(ellipse at center,#0f0,#030);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果：在这里插入图片描述

3.重复渐变

在网页设计中，经常会遇到在一个背景上重复应用渐变的情况，这时就需要使用重复渐变。重复渐变包括重复线性渐变和重复径向渐变，具体解释：

（1.）重复线性渐变

在CSS3中，通过“background-image:repeating-liner-gradient（参数值）；”样式可以实现重复线性渐变的效果，格式：

background-image:repeating-linear-gradient（渐变角度，颜色值1，颜色值2...，颜色值n);

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>重复线性渐变</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-image:repeating-linear-gradient(90deg,#E50743,#E8ED30 10%,#3FA62E 15%);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果：
在这里插入图片描述

（2.）重复径向渐变

在CSS3中，通过“background-image:repeating-radial-gradient（参数值）；”样式可以实现重复径向渐变效果，基本格式：

background-image:repeating-radial-gradient（渐变角度，颜色值1，颜色值2...，颜色值n);

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>重复径向渐变</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background-image:repeating-radial-gradient(circle at 50% 50%,#E50743,#E8ED30 10%,#3FA62E 15%);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>