css中普通流概述
CSS概述 (CSS Outlining)
Outline is a line that goes around the element, outside of the border.
轮廓线是在边框外围绕元素的线。
In contrast to border, outlines do not take any space in the box model. Adding an outline to an element does not affect the position of that element or other elements.
与边框相反，轮廓在盒模型中不占用任何空间。 向元素添加轮廓不会影响该元素或其他元素的位置。
The essential properties of outline are outline-color, outline-style and outline-width.
轮廓的基本属性是轮廓颜色 ， 轮廓样式和轮廓宽度 。
Syntax:
句法：
Element{
Outline:outline-color outline-style outline-width;
}
Some common outline properties and their values,
一些常见的轮廓属性及其值，
| Parameter | Details |
|---|---|
| dotted | dotted outline |
| dashed | dashed outline |
| solid | solid outline |
| double | double outline |
| groove | grooved outline, it depends on the outline-color value |
| ridge | ridged outline, it depends on the outline-color value |
| inset | inset outline, it depends on the outline-color value |
| outset | outset outline, it depends on the outline-color value |
| none | no outline |
| hidden | hidden outline |
| 参数 | 细节 |
|---|---|
| 点缀 | 虚线轮廓 |
| 虚线 | 虚线轮廓 |
| 固体 | 实心轮廓 |
| 双 | 双轮廓 |
| 槽 | 带凹槽的轮廓，取决于轮廓颜色值 |
| 岭 | 棱形轮廓，取决于轮廓颜色值 |
| 插图 | 插入轮廓，取决于轮廓颜色值 |
| 一开始 | 开始轮廓，取决于轮廓颜色值 |
| 没有 | 没有轮廓 |
| 隐 | 隐藏的轮廓 |
轮廓样式 (Outline style)
The outline-style property is used to set the style of the outline of an element.
outline-style属性用于设置元素的轮廓样式。
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {
border: 1px solid black;
outline-color: red;
outline-style: dotted;
}
p.p2 {
border: 1px solid black;
outline-style: dashed;
outline-color: red;
}
p.p3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
</style>
</head>
<body>
<p class="p1">A dotted red outline</p>
<p class="p2">A dashed red outline</p>
<p class="p3">A solid red outline</p>
</body>
</html>
Output
输出量
The above code would outline the content inside the p tag according to the outline-style applied to it.
上面的代码将根据应用于它的轮廓样式来轮廓化p标签内的内容。
轮廓宽度 (Outline-width)
In CSS The outline-width property is used to specify the width of the outline, and can have one of the following values:
在CSS中， outline-width属性用于指定轮廓的宽度，并且可以具有以下值之一：
thin (typically 1px)
细(通常为1px)
medium (typically 3px)
中(通常为3px)
thick (typically 5px)
厚(通常为5px)
A specific size (pt, px, em, cm)
特定尺寸(pt，px，em，cm)
Example:
例：
<!DOCTYPE html>
<head>
<style>
.p1 {
border: 4px solid blue;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
</style>
</head>
<html>
<body>
<p class="p1">
Some content
</p>
</body>
</html>
Output
输出量
The above code would apply solid outline with thin width around the output.
上面的代码将在输出周围应用较薄宽度的实心轮廓。
轮廓色 (Outline-color)
The CSS outline-color property sets the color of the outline. The color can be set by any type (RGB, HEX, NAME).
CSS outline-color属性设置轮廓的颜色 。 可以通过任何类型(RGB，十六进制，名称)设置颜色。
Example:
例：
<!DOCTYPE html>
<head>
<style>
.p1 {
border: 2px solid blue;
outline-style: solid;
outline-color: red;
}
</style>
</head>
<html>
<body>
<p class="p1">
Some content
</p>
</body>
</html>
Output
输出量
The above code would apply solid outline, thin width with color red around the output.
上面的代码将在输出周围应用实心轮廓，较窄的宽度和红色。
翻译自: https://www.includehelp.com/code-snippets/outlining-the-content-in-css.aspx
css中普通流概述
654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
