Getting Started with CSS Cascading Style Sheets

Article directory

1. CSS
2. Comments
3. Grammar
4. Selector
5. Style sheet style
6. Common CSS styles
7. Box model

1. CSS

CSS, abbreviation for Cascading Style Sheets

CSS refers to Cascading Style Sheets, a language that describes the style of HTML documents

CSS describes how to display HTML elements on screen, paper, or other media
Separate content presentation and style control
CSS saves a lot of work. External style sheets are usually saved in external files. css and can control the layout of multiple web pages at the same time.
CSS is similar to makeup. The same HTML content is created into different rendering results through different CSS.

2. Comments

CSS comments start with /* and end with */

3. Grammar

CSS rule sets consist of selectors and declaration blocks

The selector points to the HTML element that needs to be styled
(filtering elements with similar characteristics)
A declaration block contains one or more declarations (each declaration contains an attribute name and a value).
The attributes and attribute values are separated by colons, and different attributes are separated by semicolons.

Multiple CSS declarations are separated by semicolons , and declaration blocks are enclosed in curly braces.

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

Code example:

The selector content is below

This takes the element selector as an example

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

4. Selector

Selector, used to "find" (or select) the HTML element to be styled

Classification

1. Simple selector (select elements based on name, id, class)

Selector	example	describe
.class	.intro	Select all elements with class="intro"
#id	#firstname	Select the element with id="firstname"
*	*	Select all elements
element	p	Select all <p> elements
element,element,…	div, p	Select all <div> elements and all <p> elements

2. Combinator selector (select elements based on specific relationships)

Selector	example	describe
element element	div p	Selects all <p> elements within a <div> element
element>element	div > p	Selects all <p> elements whose parent is a <div> element
element+element	div + p	Selects all <p> elements immediately following a <div> element
element1~element2	p ~ ul	Selects every <ul> element preceded by a <p> element

3. Pseudo-class selector (select elements based on specific status)

4. Pseudo-element selector (select a part of the element and set its style)

5. Attribute selector (select elements based on attributes or attribute values)

There are three basic selectors: id selector, class selector, element selector/tag selector

The selector codes below are all internal styles

priority

ID Selector > Class Selector > Element Selector
When multiple selectors act on the same label,
the attributes are different: look at the priority.
The attributes are different: superposition takes effect.

1. id selector

The id selector uses the id attribute of HTML elements to select specific elements and specify specific styles.

The id of an element is unique within the page, so the id selector is used to select a unique element

To select an element with a specific id, write a pound sign # followed by the id of the element

Tips:
Do not start the ID attribute with a number . IDs starting with numbers will not work in Mozilla/Firefox browsers.

grammar:

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

Code example:

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

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

The page shows:

2. class selector

Class selectors select HTML elements with a specific class attribute

Tips:
Do not start the ID attribute with a number . IDs starting with numbers will not work in Mozilla/Firefox browsers.

grammar:

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

Code example:

	<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>

The page shows:

3. Element selector

Also known as tag selector, it is automatically used on all elements with the same name . The element name must be an element provided by HTML.

grammar:

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

Code example:

	<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>

The page shows:

5. Style sheet style

There are three styles used in CSS, which are divided into inline styles, internal styles, and external styles.

Scope of scope
External style sheet > Internal style sheet > Inline style sheet

priority

Inline styles > Internal styles > External styles

The same style applies to the same label: look at the priority (proximity principle)

Different styles act on the same label: superposition takes effect

1. Inline styles

Also known as inline styles

Write styles directly in the tag by using the style attribute inside the tag

Generally used during testing

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

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

Tips:
It can only take effect on the current tag. Content and style are not separated, and the coupling degree is too high.

2. Internal style

Define it in the head tag with CSS code through the style tag

<!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. External style

Step
1. Create a css resource file.
2. In the head tag, the link tag introduces the external style file.

Create the demo.css file and place it in the css folder at the same level as the html page:

div {
    
    
	color: red;
}

Import the .css file:

<!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>

6. Common CSS styles

1. color color

Value method

①The word
red blue…
②RGB three-color value
rgb (red, green, blue), the value range of the three colors is 0-255.
Example: rgb(255,0,0) means red
③rgba value
rgba (red, green, blue, transparency) transparency value: 0~1, 0 is fully transparent
Example: rgba (255,0,0,1) means red
④#Value 1 Value 2 Value 3
Another hexadecimal writing method of rgb, the value paradigm is 00-FF
Example: #FF0000 means red

2. width height width height

Tips:
Only block elements can set width and height, and row-level element settings do not take effect.
Value method
1: The absolute numerical unit of the value is pixel PX
2: Percentage: the proportion of the parent element

3. background background

All properties

Attributes	describe
background	Shorthand property that sets all background properties in one statement
background-attachment	Set whether the background image is fixed or scrolls with the rest of the page
background-clip	Specifies the drawing area of the background
background-color	Set the background color of an element
background-image	Set the background image of an element
background-origin	Specifies where to place the background image
background-position	Set the starting position of the background image
background-repeat	Set whether and how the background image repeats
background-size	Specify the size of the background image

3.1 Background color color

The background-color attribute specifies the background color of the element

Opacity
(0~1)
Code example:

	<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>

The page shows:

3.2 Background imageimage

The background-image attribute specifies the image used as the element's background

By default, the image repeats, covering the entire element

Code example:

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

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

	</head>

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

The page shows:

3.3 Image repeat repeat

By default, the background-image property repeats the image both horizontally and vertically

repeat-x: horizontal axis tiling
repeat-y: vertical axis tiling
repeat: simultaneous tiling
no-repeat: no tiling

3.4 Image attachment

The background-attachment attribute specifies whether the background image should scroll with the page

background fixed

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

background scroll

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

3.5 Image position position

The background-position property is used to specify the position of the background image

You can add positions (left, fight...)
or coordinates later (the first parameter represents the offset distance on the x-axis, and the second parameter represents the offset distance on the y-axis)

Code example:

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

The page shows:
Insert image description here

abbreviation

When using shorthand attributes, the order of attribute values is:

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

Complete writing:

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

Abbreviated writing:

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

4. border

The border attribute allows specifying the style, width, and color of an element's border

You can set 1~4 values (for top border, right border, bottom border and left border)

All properties

Attributes	describe
border	Shorthand property to set all border properties in one statement
border-color	Abbreviated attribute, set the color of the four borders
border-radius	Shorthand property that can set all four border-*-radius properties of rounded corners
border-style	Abbreviation attribute, set the style of four borders
border-width	Abbreviation attribute, set the width of the four borders
border-bottom	Shorthand attribute, set all bottom border attributes in one statement
border-bottom-color	Set the color of the bottom border
border-bottom-style	Set the style of the bottom border
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元素：边距、边框，填充、、实际内容

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

盒子模型说明图： $[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (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)
Insert image description here

内边距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

The outline-color property is used to set the color of the outline

Color inversion can be performed using outline-color: invert

Shorthand attribute

Shorthand properties:
outline-width
outline-style (required)
outline-color

The order of values does not matter

Contour offset

outline-offset adds space between the element's outline and border

The space between the element and its outline is transparent

Code example:

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

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

The page shows: