CSS 函式 - inset()

CSS 函式 `inset()` 定義了一個矩形，該矩形相對於參考框的每一側向內放置一定的距離。它是用於定義<basic-shape> 資料型別的基本形狀函式之一。

可能的值

<length-percentage>{1,4} - `inset()` 函式使用四個引數來定義矩形相對於參考框的頂部、右側、底部和左側的內偏移量。類似於 margin 速記，此函式可用於使用一個、兩個或四個值來定義內邊距。
<border-radius> - 這些是可選的，並根據 border-radius 速記的語法定義內嵌矩形的圓角。

語法

shape-outside: inset(top right bottom left);

CSS inset() - 基本示例

以下示例演示了 `inset()` 函式與 `shape-outside` 屬性結合使用的情況。

<html>
<head>
<style>
   div {  
      float: right;
      width: 250px;
      height: 150px;
      shape-outside: inset(20px);
   }
</style>
</head>
<body>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum.</p>
</body>
</html>

CSS inset() - 帶尺寸和圓角

以下示例演示了指定 `inset()` 函式的尺寸和圓角。

提供的 CSS 中的 `inset()` 函式在元素內建立一個內嵌形狀，距離其邊緣 `10%` 的距離。
`inset()` 內部的 `round` 關鍵字為該形狀應用圓角。
使用 `50%` 的水平半徑和 `15%` 的垂直半徑，可以為環繞元素的文字建立圓角內嵌。

<html>
<head>
<style>
div {  
float: left;
width: 250px;
height: 200px;
shape-outside: inset(10% round 50% 15%);
background: skyblue;
}
</style>
</head>
<body>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum vel bibendum, velit sapien bibendum sapien, vel vel bibendum sapien velit sed sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum vel bibendum, velit sapien bibendum sapien, vel vel bibendum sapien velit sed sapien.</p>
</body>
</html>

列印頁面