CSS层叠样式表入门基础

最新推荐文章于 2025-05-20 15:51:18 发布

原创最新推荐文章于 2025-05-20 15:51:18 发布 · 729 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

JavaEE 同时被 2 个专栏收录

46 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

本文详细介绍了CSS的选择器，包括ID选择器、类选择器和元素选择器的优先级，以及行内样式、内部样式和外部样式的应用。此外，还探讨了颜色、宽高、背景、边框等常用样式属性，以及盒子模型的概念和外边距、内边距、轮廓的设置。内容深入浅出，旨在帮助读者全面理解并掌握CSS在网页设计中的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 CSS

CSS，Cascading Style Sheets的缩写

CSS 指的是层叠样式表，是一种描述HTML文档样式的语言

CSS 描述如何在屏幕、纸张或其他媒体上显示 HTML 元素
将内容展示和样式控制分离
CSS 节省了大量工作，外部样式表通常保存在外部文件 .css中，可以同时控制多张网页的布局
CSS类似于化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果

二、注释

CSS注释以 /* 开始, 以 */ 结束

三、语法

CSS 规则集由选择器和声明块组成

选择器指向需要设置样式的 HTML 元素
(筛选具有相似特征的元素)
声明块包含一条或多条声明(每条声明包含一个属性名称和一个值)
属性和属性值之间用冒号分割，不同的属性之间用分号隔开

多条 CSS 声明用分号分隔，声明块用花括号括起来

选择器 {
	属性1:值1;
	属性2:值2;
	...
}

代码示例：

选择器内容在下文

此以元素选择器为例

p {	/*CSS 中的选择器（指向要设置样式的 HTML 元素：<p>）*/
	/*声明：   属性名称:值   */
	color: red;/*color 是属性，red 是属性值*/
	text-align: center;/*text-align 是属性，center 是属性值*/
}

四、选择器

选择器，即用于“查找”（或选取）要设置样式的 HTML 元素

分类

1、简单选择器（根据名称、id、类来选取元素）

选择器	例子	描述
.class	.intro	选取所有 class=“intro” 的元素
#id	#firstname	选取 id=“firstname” 的那个元素
*	*	选取所有元素
element	p	选取所有<p> 元素
element,element,…	div, p	选取所有 <div> 元素和所有 <p> 元素

2、组合器选择器（根据特定关系来选取元素）

选择器	例子	描述
element element	div p	选择 <div> 元素内的所有 <p> 元素
element>element	div > p	选择其父元素是 <div> 元素的所有 <p> 元素
element+element	div + p	选择所有紧随 <div> 元素之后的 <p> 元素
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素

3、伪类选择器（根据特定状态选取元素）

4、伪元素选择器（选取元素的一部分并设置其样式）

5、属性选择器（根据属性或属性值来选取元素）

基本选择器有三种：id选择器、class选择器、元素选择器/标签选择器

下文选择器代码均为内部样式

优先级

ID选择器 > 类选择器 > 元素选择器
当多个选择器作用在同一个标签时
属性不同：看优先级
属性不同：叠加生效

1. id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素、指定特定的样式

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素

要选择具有特定 id 的元素，请写一个井号#，后跟该元素的 id

tips：
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用

语法：

#id属性名称{      /*id 选择器以 "#" 来定义*/
	属性名：属性值
}

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			#demo1 {/*id 选择器以 "#" 来定义*/
				color: red;
			}
		</style>
	</head>

	<body>
		<p id="demo1">Hello World!</p>
	</body>
</html>

页面显示：

2. class选择器

类选择器选择有特定 class 属性的 HTML 元素

tips：
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用

语法：

.class名称{      /*类选择器以一个点"."号来定义*/
	属性名：属性值
}

代码示例：

	<head>
		<meta charset="UTF-8">
		<style>
			#demo1 {/*id选择器，优先级最高*/
				color: deeppink;
			}
			p {/*元素选择器，优先级最低*/
  				color: black;
			} 
			.demo3 {/*类选择器，优先级中等*/
  				text-align: center;
  				color: darkmagenta;
			}
		</style>
	</head>

	<body>
		<h3 class="demo3">使用了类选择器的标题</h3> 
		<p class="demo3" >同时使用元素选择器的段落(class>元素)</p>
		<p class="demo3" id="demo1">同时使用id选择器和元素选择器的段落</p>
	</body>

页面显示：

3. 元素选择器

又称标签选择器，自动使用在所有同名的元素上，元素名称必须是html提供的元素

语法：

元素名称{
	属性名：属性值
}

代码示例：

	<head>
		<meta charset="UTF-8">
		<style>
			#demo1 {
				color: deeppink;
			}
			p {
  				color: black;
			} 
		</style>
	</head>

	<body>
		<p>段落1</p>
		<p id="demo1">同时使用id选择器的段落2（就近原则，因此使用元素选择器）</p>
		<p>段落3</p>
	</body>

页面显示：

五、样式表style

CSS的使用有三种样式，分为行内样式、内部样式、外部样式

作用域的范围
外部样式表>内部样式表>行内样式表

优先级

行内样式 > 内部样式 >外部样式

同样的样式作用于同一个标签：看优先级（就近原则）

不同样式作用于同一个标签：叠加生效

1. 行内样式

又称内联样式

通过使用标签内部的style属性直接在标签中编写样式

一般在测试的时候使用

<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello</html标签>

<div style="color: red;">hello my css</div>

tips：
只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高

2. 内部样式

通过style标签用CSS代码定义在head标签内

<!DOCTYPE html>
<html>
	<head> <!--定义在head标签内-->
		<meta charset="UTF-8">
		<title>内部样式</title>
		<style>/*使用style标签，内部通过css代码实现*/
			div{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>hello my css</div>
	</body>
</html>

3. 外部样式

步骤
1、创建css资源文件
2、在head标签内，link标签引入外部样式文件

创建demo.css文件，放在与html页面同级的css文件夹中：

div {
	color: red;
}

引入.css文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		
		<!--html页面中的引入-->
		<link rel="stylesheet" href="css/demo.css" />
		
	</head>
	<body>
		<div>hello</div>
	</body>
</html>

六、 CSS常用样式

1. 颜色color

取值方式

①单词
red blue…
②rgb三色取值
rgb（红，绿，蓝），三色的取值范围是0-255
例：rgb(255,0,0)表示红
③rgba取值
rgba（红，绿，蓝，透明度）透明度取值:0~1,0为全透明
例：rgba(255,0,0,1)表示红
④#值1值2值3
rgb的另一种十六进制写法，值的范式是00-FF
例：#FF0000表示红

2. 宽高width height

tips:
只有块状元素可以设置宽高，行级元素设置不生效
取值方式
1：数值绝对数字单位是像素PX
2：百分比：占据父元素的比例

3. 背景background

全部属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动
background-clip	规定背景的绘制区域
background-color	设置元素的背景色
background-image	设置元素的背景图像
background-origin	规定在何处放置背景图像
background-position	设置背景图像的开始位置
background-repeat	设置背景图像是否及如何重复
background-size	规定背景图像的尺寸

3.1 背景颜色color

background-color 属性指定元素的背景色

不透明度
opacity（0~1）
代码示例：

	<head>
		<meta charset="UTF-8">
		<title>背景颜色</title>
		<style>
			body {
				background-color: lightblue;
			}
			
			div {
				background-color: pink;
			}
			
			p {
				background-color: yellow;
			}
		</style>
	</head>

	<body>

		<div>
			这是 div 元素内的文本
			<p>div中插入一段文字，这段为自己的颜色</p>
			仍然在 div 元素中
		</div>

	</body>

页面显示：

3.2 背景图像image

background-image 属性指定用作元素背景的图像

默认情况下，图像会重复、覆盖整个元素

代码示例：

	<head>
		<meta charset="UTF-8">
		<title>背景图像</title>

		<style>
			body {
				background-image: url(../../img/小奶猫1.JPG);
			}
		</style>

	</head>

	<body>
		<p style="color: white; ">喵~</p>
	</body>

页面显示：

3.3 图像重复repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像

repeat-x:横轴平铺
repeat-y:纵轴平铺
repeat:同时平铺
no-repeat:不平铺

3.4 图像附着attachment

background-attachment 属性指定背景图像是否应该随页面滚动

背景固定

body {
  background-image: url("cat.png");
  background-attachment: fixed;
}

背景滚动

body {
  background-image: url("cat.png");
  background-attachment: scroll;
}

3.5 图像位置position

background-position 属性用于指定背景图像的位置

后面可加位置（left、fight…）
也可加坐标（第一个参数表示x轴上偏移距离，第二个参数表示y轴上偏移距离）

代码示例：

		<style>
			body {
				background-image: url(../../img/小奶猫1.JPG);
				background-repeat: no-repeat;
 				background-position: left top;
			}
		</style>

页面显示：
在这里插入图片描述

简写形式

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

完整写法：

body {
  background-color: #ffffff;
  background-image: url("cat.png");
  background-repeat: no-repeat;
  background-position: right top;
}

简写写法：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

4. 边框border

border 属性允许指定元素边框的样式、宽度和颜色

均可以设置1~4个值（用于上边框、右边框、下边框和左边框）

全部属性

属性	描述
border	简写属性，在一条声明中设置所有边框属性
border-color	简写属性，设置四条边框的颜色
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性
border-style	简写属性，设置四条边框的样式
border-width	简写属性，设置四条边框的宽度
border-bottom	简写属性，在一条声明中设置所有下边框属性
border-bottom-color	设置下边框的颜色
border-bottom-style	设置下边框的样式
border-bottom-width	设置下边框的宽度
border-left	简写属性，在一条声明中设置所有左边框属性
border-left-color	设置左边框的颜色
border-left-style	设置左边框的样式
border-left-width	设置左边框的宽度
border-right	简写属性，在一条声明中设置所有右边框属性
border-right-color	设置右边框的颜色
border-right-style	设置右边框的样式
border-right-width	设置右边框的宽度
border-top	简写属性，在一条声明中设置所有上边框属性
border-top-color	设置上边框的颜色
border-top-style	设置上边框的样式
border-top-width	设置上边框的宽度

4.1 样式style

border-style 属性指定要显示的边框类型

类型	描述
dotted	定义点线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双边框
groove	定义 3D 坡口边框。效果取决于 border-color 值
ridge	定义 3D 脊线边框。效果取决于 border-color 值
inset	定义 3D inset 边框。效果取决于 border-color 值
outset	定义 3D outset 边框。效果取决于 border-color 值
none	定义无边框
hidden	定义隐藏边框

tips：
除非设置了 border-style 属性，否则其他 CSS 边框属性不会有作用

代码示例1：

/* 四个值 */
p {
  border-style: dotted solid double dashed; 
}

/* 三个值 */
p {
  border-style: dotted solid double; 
}

/* 两个值 */
p {
  border-style: dotted solid; 
}

/* 一个值 */
p {
  border-style: dotted; 
}

代码示例2：

<head>
	<style>
		p.dotted {border-style: dotted;}
		p.dashed {border-style: dashed;}
		p.solid {border-style: solid;}
		p.double {border-style: double;}
		p.groove {border-style: groove;}
		p.ridge {border-style: ridge;}
		p.inset {border-style: inset;}
		p.outset {border-style: outset;}
		p.none {border-style: none;}
		p.hidden {border-style: hidden;}
		p.mix {border-style: dotted dashed solid double;}
	</style>
</head>

<body>
	<p class="dotted">点状边框。</p>
	<p class="dashed">虚线边框。</p>
	<p class="solid">实线边框。</p>
	<p class="double">双线边框。</p>
	<p class="groove">凹槽边框。</p>
	<p class="ridge">垄状边框。</p>
	<p class="inset">3D inset 边框。</p>
	<p class="outset">3D outset 边框。</p>
	<p class="none">无边框。</p>
	<p class="hidden">隐藏边框。</p>
	<p class="mix">混合边框。</p>
</body>

页面显示2：

4.2 宽度width

指定大小： px、pt、cm、em

4.3 颜色color

border-color 属性用于设置四个边框的颜色

如果未设置 border-color，则将继承元素的颜色

代码示例：

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

简写形式

为了缩减代码，也可以在一个属性中指定所有单独的边框属性

border属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color

代码示例：

p.b1 {
  border: 5px solid red;
}

/*左边框*/
p.b2 {
  border-left: 6px solid red;
  background-color: lightgrey;
}

/*下边框*/
p.b3 {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

/*圆角边框*/
p.normal {
  border: 2px solid red;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}

5. 文本样式

属性	描述
color	设置文本颜色
background-color	文本背景色
direction	指定文本的方向 / 书写方向
letter-spacing	设置字符间距
line-height	设置行高，文字之间的间隙
text-align	指定文本的水平对齐方式
text-decoration	指定添加到文本的装饰效果
text-indent	指定文本块中首行的缩进
text-shadow	指定添加到文本的阴影效果
text-transform	控制文本的大小写
text-overflow	指定应如何向用户示意未显示的溢出内容
unicode-bidi	与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言
vertical-align	指定文本的垂直对齐方式
white-space	指定如何处理元素内的空白
word-spacing	设置单词间距

代码示例：

		<style>
			div {
				background-color: lightgrey;/*文本背景色*/
				color: blue;/*文本色*/
				
				/*设置文本的水平对齐方式;文本可以左对齐、右对齐、居中对齐
				 * 
				 * 当 text-align 属性为 "justify" ，将拉伸每一行使每一行具有相等的宽度
				 * （就像在杂志和报纸中）
				 */
				text-align: center;
				
				/*direction 和 unicode-bidi 属性可用于更改元素的文本方向*/
				direction: rtl;
  				unicode-bidi: bidi-override;
  				
				/*vertical-align设置元素的垂直对齐方式*/
				vertical-align: top;
				
				/*text-decoration 属性用于设置或删除文本装饰
				 * text-decoration: none; 通常用于从链接上删除下划线：
				 * 其他 text-decoration 值用于装饰文本
				 */
				text-decoration: underline;
				
				
				/*text-transform用于指定文本中的大写和小写字母
				 * 将所有内容转换为大写或小写字母，或将每个单词的首字母大写
				 */
				text-transform: uppercase;
				
				/*text-indent 属性用于指定文本第一行的缩进*/
				text-indent: 50px;
				
				
				/*letter-spacing 属性用于指定文本中字符之间的间距
				 * 可以增加或减少字符之间的间距
				 */
				letter-spacing: 3px;
				
				/*line-height 属性用于指定行之间的间距*/
				line-height: 0.8;
				
				/*word-spacing用于指定文本中单词之间的间距*/
				word-spacing: 10px;
				
				/*white-space指定元素内部空白的处理方式
				 *下例禁用元素内的文本换行
				 */
				white-space: nowrap;
				
				/*text-shadow 属性为文本添加阴影。
				 * 最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）
				 * 向阴影添加颜色（红色）：text-shadow: 2px 2px red;
				 * 向阴影添加模糊效果（5px）：text-shadow: 2px 2px 5px red;
				*/
				text-shadow: 2px 2px;
				
			}
		</style>

6. 列表样式

在 HTML 中，列表主要有两种类型：
无序列表（<ul>），列表项用的是项目符号标记
有序列表（<ol>），列表项用的是数字或字母标记
CSS 列表属性作用：
①为有序列表设置不同的列表项标记
②为无序列表设置不同的列表项标记
③将图像设置为列表项标记
④为列表和列表项添加背景色

常用属性代码示例：

		<style>
			li{
				/*list-style-type 指定列表项标记的类型
				 * none  无样式
				 * （none也可以用于删除标记/项目符号）
				 * （列表拥有默认的外边距和内边距，删除内容在 <ul> 或 <ol> 中添加 margin:0 和 padding:0）
				 * 
				 * circle   空心圆
				 * square   正方形
				 * upper-roman
				 * lower-alpha
				 * decimal  数字
				 */
				list-style-type: circle;
				
				
				/*list-style-image 将图像指定为列表项标记*/
				list-style-image: url(../../img/小奶猫1.JPG);
				
				
				/*list-style-position 指定列表项标记（项目符号）的位置
				 * 默认：outside，点将在列表项之外，列表项每行的开头将垂直对齐
				 * inside，点将在列表项内，是列表项的一部分，因此也是文本的一部分，并在开头推开文本
				 */
				list-style-position: outside;
			}
		</style>

简写形式

使用简写属性时，属性值的顺序为：
list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）

代码示例：

ul {
  list-style: square inside url("circle.gif");
}

设置列表的颜色样式

添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表

而添加到 <li> 标记的属性将影响各个列表项

d代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			ol {
				background: #ff9999;
				padding: 20px;
			}
			
			ul {
				background: #3399ff;
				padding: 20px;
			}
			
			ol li {
				background: #ffe5e5;
				padding: 5px;
				margin-left: 35px;
			}
			
			ul li {
				background: #cce5ff;
				margin: 5px;
			}
		</style>
	</head>

	<body>

		<h1>设置列表的颜色样式：</h1>

		<ol>
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ol>

		<ul>
			<li>Coffee</li>
			<li>Tea</li>
			<li>Coca Cola</li>
		</ul>

	</body>

</html>

页面显示：

七、盒子模型

概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用

CSS盒模型本质上是一个盒子，封装周围的HTML元素：边距、边框，填充、、实际内容

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

盒子模型说明图： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjdUpbXh-1629901935462)(imgs\box-model.png)]$

Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域，内边距是透明的
Content(内容) - 盒子的内容，显示文本和图像

盒子的宽度和高度

元素实际在页面占有的总宽度计算公式：
总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

如果想要设置的宽度直接就是元素的实际宽度，通过box-sizing属性

元素的宽度和高度

height 和 width 属性可设置如下值：
auto ：默认。浏览器计算高度和宽度
length ：以 px、cm 等定义高度/宽度
% ：以包含块的百分比定义高度/宽度
initial ：将高度/宽度设置为默认值
inherit ：从其父值继承高度/宽度

外边距margin

margin 定义外边距

可以为元素的每一侧指定外边距的属性：
margin-top
margin-right
margin-bottom
margin-left
所有外边距属性都可以设置以下值：
auto ：浏览器来计算外边距，使元素在其容器中水平居中
length ：以 px、pt、cm 等单位指定外边距
% ：指定以包含元素宽度的百分比计的外边距
inherit：指定应从父元素继承外边距
tips：
允许负值

代码示例：

<style>
	div {
		  border: 1px solid black;
		  margin-top: 100px;
		  margin-bottom: 100px;
		  margin-right: 150px;
		  margin-left: 80px;
		  background-color: lightblue;
	}
</style>

简写属性

上右下左（顺时针）margin-top、margin-right、margin-bottom、margin-left分别一次对应四个参数

代码示例：

<style>
	div {
		border: 1px solid black;
		margin: 25px 50px 75px 100px;/*上右下左*/
		background-color: lightblue;
	}
	p.p1 {
  		margin: 25px 50px 75px;/*上，左右，下*/
	}
	p.p2 {
  		margin: 25px 50px;/*上下，左右*/
	}
	p.p3 {
  		margin: 25px;/*上下左右*/
	}
</style>

外边距合并

外边距合并，即当两个垂直外边距相遇时，它们将形成一个外边距

合并后的外边距的高度等于max(高度1，高度2)
在这里插入图片描述

内边距Padding

用于在任何定义的边界内的元素内容周围生成空间

元素的每一侧内边距的属性：
padding-top
padding-right
padding-bottom
padding-left
所有内边距属性都可以设置以下值：
length ：以 px、pt、cm 等单位指定内边距
% ：指定以包含元素宽度的百分比计的内边距
inherit ：指定应从父元素继承内边距
tips：
不允许负值

代码示例：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

简写属性

上右下左（顺时针）padding-top、padding-right、padding-bottom、padding-left分别一次对应四个参数

代码示例：

<style>
	div {
		border: 1px solid black;
		padding: 25px 50px 75px 100px;/*上右下左*/
		background-color: lightblue;
	}
	p.p1 {
  		padding: 25px 50px 75px;/*上，左右，下*/
	}
	p.p2 {
  		padding: 25px 50px;/*上下，左右*/
	}
	p.p3 {
  		padding: 25px;/*上下左右*/
	}
</style>

轮廓(区别于边框)

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素

CSS 拥有如下轮廓属性：
outline-style
outline-color
outline-width
outline-offset
outline
tips：
轮廓与边框不同
轮廓是在元素边框之外绘制的，并且可能与其他内容重叠；轮廓不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响

轮廓样式

outline-style 属性指定轮廓的样式，并可设置如下值：

值	描述
dotted	定义点状的轮廓
dashed	定义虚线的轮廓
solid	定义实线的轮廓
double	定义双线的轮廓
groove	定义 3D 凹槽轮廓
ridge	定义 3D 凸槽轮廓
inset	定义 3D 凹边轮廓
outset	定义 3D 凸边轮廓
none	定义无轮廓
hidden	定义隐藏的轮廓

代码示例：

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

轮廓宽度

outline-width 属性指定轮廓的宽度

宽度值
thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）

轮廓颜色

outline-color 属性用于设置轮廓的颜色

使用 outline-color: invert可以执行颜色反转

简写属性

简写属性：
outline-width
outline-style（必需）
outline-color

值的顺序无关紧要

轮廓偏移

outline-offset 在元素的轮廓与边框之间添加空间

元素及其轮廓之间的空间是透明的

代码示例：

<head>
	<style>
		p {
			margin: 30px;
			border: 1px solid black;
			outline: 1px solid red;
			outline-offset: 15px;
		}
	</style>
</head>

<body>
	<p>此段落边框边缘外 15 像素处有一条轮廓线</p>
</body>