css-functions-图形函数

概述

本文会讨论和图形函数有关的 5 个函数，分别是：inset、circle、ellipse、polygon和path。这个 5 个图形函数也对应着相应的<basic-shape>。

<basic-shape>是一种表现基础图形的 CSS 数据类型，作用于clip-path或shape-outside属性中；而其值是由图形函数获得。

使用方法可以参考示例：CSS-Functions:图形函数

图形函数介绍

inset函数

inset函数定义了一个插进的长方形，其参数为该长方形相对元素的偏移量。准确来说应该是矩形，我们还可以设置round参数，使其成为一个带圆角的形状。

/**inset 图1 矩形*/
 {
   
  clip-path: inset(10px);
}

/** inset 图2 带圆角 */
 {
   
  clip-path: inset(20px 10px round 20px);
}

circle函数

circle函数定义了一个圆形，使用半径和位置来描述。circle可以指定半径和圆心的位置，圆心可以省略，若省略则为元素的中心点

/** circle 图1 */
 {
   
  clip-path: circle