Css 简明教程

CSS - inset

CSS 属性 inset 是其他 CSS 属性 * top, right, bottom,* 和/或 * left* 的简写。

The CSS property inset is a shorthand for the other CSS properties top, right, bottom, and / or left.

它遵循与 * margin* CSS 属性相同的多值语法。

It follows the same multi-value syntax as that of margin CSS property.

inset 属性指定了物理偏移量，与元素的写模式、方向和文本方向无关。

The inset property specifies the physical offsets, irrespective of the writing mode, direction, and text orientation of the element.

Possible Values

CSS 属性 inset 采用与 left CSS 属性相同的取值，如下所示：

The CSS property inset takes the same set of values as left CSS property, which are as follows:

<length> − Can specify a negative, null or positive value.
<percentage> − Percentage of the container’s width.
auto − Default value. Browser calculates the left position.
inherit − Specifies the same value as computed from its parent element.

Applies To

所有定位元素。

All positioned elements.

Syntax

inset = <'top'>{1,4}

/* <length> values */
inset: 5px; /* value applied to all edges */
inset: 5px 10px; /* top/bottom left/right */
inset: 3px 5px 8px; /* top left/right bottom */
inset: 3.4em 5em 4em 4em; /* top right bottom left */

/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 15% 10% 10% 10%;

/* Keyword value */
inset: auto;

CSS inset - Four Length Values

以下示例演示了将 inset 属性与传递给它的四个长度值一起使用，这些值确定顶部、右侧、底部和左侧的偏移值。

The following example demonstrates the use of inset property with four length values passed to it, which determines the top, right, bottom and left offset values.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 45px 35px 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 4 values</span>
   </div>
</body>
</html>

CSS inset - Three Length Values

以下示例演示了将 inset 属性与传递给它的三个长度值一起使用，这些值确定顶部、右侧、底部和左侧的偏移值。

The following example demonstrates the use of inset property with three length values passed to it, which determines the top, right, bottom and left offset values.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 35px 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 3 values</span>
   </div>
</body>
</html>

CSS inset - Two Length Values

以下示例演示了将 inset 属性与传递给它的两个长度值一起使用，这些值确定顶部、右侧、底部和左侧的偏移值。

The following example demonstrates the use of inset property with two length values passed to it, which determines the top, right, bottom and left offset values.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 2 values</span>
   </div>
</body>
</html>

CSS inset - One Length Value

以下示例演示了将 inset 属性与传递给它的一个长度值一起使用，该值确定顶部、右侧、底部和左侧的偏移值。

The following example demonstrates the use of inset property with just one length value passed to it, which determines the top, right, bottom and left offset values.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 1 value</span>
   </div>
</body>
</html>

CSS inset - Percentage Value

以下示例演示了将 inset 属性与传递给它的两个百分比值一起使用，这些值确定顶部、右侧、底部和左侧的偏移值。

The following example demonstrates the use of inset property with two percentage values passed to it, which determines the top, right, bottom and left offset values.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25% 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 2 % values</span>
   </div>
</body>
</html>

CSS inset - Mixed Values

以下示例演示了将 inset 属性与混合值一起使用，即一个长度和一个作为百分比值传递给它的值，这些值确定顶部、右侧、底部和左侧的偏移值。

The following example demonstrates the use of inset property with mixed values, i.e., one length and another as percentage values passed to it, which determines the top, right, bottom and left offset values.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 0.25em 10%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - mixed values</span>
   </div>
</body>
</html>

CSS inset - auto Value

以下示例演示了将 inset 属性与传递给它的自动值一起使用，这些值确定顶部、右侧、底部和左侧的偏移值。

The following example demonstrates the use of inset property with auto value passed to it, which determines the top, right, bottom and left offset values.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: vertical-lr;
      position: absolute;
      inset: auto;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - auto</span>
   </div>
</body>
</html>