码农教程 - 一技在手,衣食无忧! tools

目录

CSS 外轮廓偏移

❮ 上一节 下一节 ❯

CSS 外轮廓偏移

这个outline-offset属性在元素的外轮廓和边缘/边框之间添加空间。元素与其外轮廓之间的空间是透明的。

以下示例指定边框边缘外 15px 的外轮廓：

该段落在边框边缘外 15 像素处有一个轮廓。

示例

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
亲自试一试 »

以下示例显示元素与其外轮廓之间的空间是透明的：

该段落在边框边缘外有 15px 的轮廓。

示例

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
亲自试一试 »

通过练习测试一下

练习:

设置实心，5px外轮廓<div> 元素的边框。

<style>
div {
  : solid;
  : 5px;
}
</style>

<body>

<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>

</body>

开始练习

所有 CSS 外轮廓属性

Property Description
outline A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color Sets the color of an outline
outline-offset Specifies the space between an outline and the edge or border of an element
outline-style Sets the style of an outline
outline-width Sets the width of an outline

❮ 上一节 下一节 ❯