CSS 数据类型

CSS <basic-shape> 数据类型定义用于属性的不同形状，例如 clip-path、shape-outside 和 offset-path。

属性值

  • inset() - 表示插入矩形。

  • Circle() - 表示具有给定半径和位置的圆。

  • ellipse() - 表示具有给定半径和位置的椭圆。

  • polygon() - 通过将其顶点定义为坐标和 SVG 填充规则来表示多边形。

  • path() - 使用定义自定义剪辑路径SVG 路径数据和 SVG 填充规则。

语法

clip-path: inset( <length-percentage>{1,4} [ round <`border-radius`> ]? )
clip-path: circle( <shape-radius>? [ at <position> ]?);
clip-path: ellipse([ <shape-radius>{2} ]? [ at <position> ]?);
clip-path: polygon( <fill-rule>? [ <shape-arg> <shape-arg> ]# );
clip-path: path(  [ <fill-rule>, ]? <string> );

基本形状的计算值

<basic-shape> 函数按指定计算值，但以下情况除外:

  • 包含省略的值并使用其默认值进行计算。

  • 在circle()或ellipse()中，<position>值由距左上角原点的一对偏移量（水平和垂直）确定，每个偏移量指定为绝对长度和百分比的组合。

  • Inset() 将 <border-radius> 值计算为所有八个 <length> 或百分比值的扩展列表。

基本形状的插值

在两个 <basic-shape> 元素之间设置动画时，插值遵循形状函数中的值作为包含 <length>、<percentagenotransR 或 calc() 元素的列表进行插值的规则。如果列表值不是这些类型但相同，则将进行插值。

  • 两个形状的参考框必须相同。

  • 当两个形状属于相同类型时，例如 ellipse() 或 Circle()，并且没有一个半径使用最近侧或最远侧关键字，则在每个值之间进行插值形状函数。

  • 如果两个形状都是 inset() 类型，则在形状函数中的值之间进行插值。

  • 当两个形状都是 Polygon() 类型，具有相同数量的顶点，并使用相同的 <fill-rule>，在其形状函数的值之间进行插值。

  • 当两个形状时属于相同的path()类型，并且具有相同顺序的相同数量和类型的路径数据命令，将每个路径数据命令插值为实数。

  • 在任何其他情况，不使用插值。

CSS <basic-shape> - inset()

以下示例演示了clip-path的使用: inset (10% 10% 10% 10% round 10px 10px) 属性，创建一个带圆角的正方形 -

<html>
<head>
<style>
   .clip-inset {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path: inset(10% 10% 10% 10% round 10px 10px);
   }
</style>
</head>
<body>
   <div class="clip-inset"></div>
</body>
</html>

CSS <basic-shape> - Circle()

以下示例演示使用clip-path:circle(50% at 50% 50%)属性，创建一个半径为元素大小50%的圆。 −

<html>
<head>
<style>
   .clip-circle {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path: circle(50% at 50% 50%);
   }
</style>
</head>
<body>
   <div class="clip-circle"></div>
</body>
</html>

CSS <clip-path> - ellipse()

以下示例演示了 Clip-path: ellipse(75px 40px at 50% 40%) 属性，该属性创建椭圆形状−

<html>
<head>
<style>
   .clip-ellipse {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path:  ellipse(75px 40px at 50% 40%);
   }
</style>
</head>
<body>
   <div class="clip-ellipse"></div>
</body>
</html>

CSS <clip-path> - Polygon()

以下示例演示了 Clip-path: Polygon() 属性，该属性创建带有坐标的多边形剪辑路径 −

<html>
<head>
<style>
   .clip-polygon {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
   }
</style>
</head>
<body>
   <div class="clip-polygon"></div>
</body>
</html>

CSS <clip-path> - path()

以下示例演示了将 Clip-path 属性与 path() 一起使用，以使用 SVG 路径数据定义自定义剪辑路径 -

<html>
<head>
<style>
   .clip-area {
      width: 150px;
      height: 150px;
      background-color: red;
      clip-path: path('M 150 150 L 0, 100 L 200,100 z');
   }
</style>
</head>
<body>
   <div class="clip-area"></div>
</body>
</html>

CSS 动画多边形

以下示例演示了 @keyframes at-rule 对形状进行动画处理，并进行形状的过渡。剪辑路径属性有助于将形状从一种形式更改为另一种形式。 -

<html>
<head>
<style>
   .clip-polygon {
      width: 150px;
      height: 150px;
      background: blue;
      clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
      animation: 4s poly infinite alternate ease-in-out;
   }
   @keyframes poly {
      from {
         clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
      }
      to {
         clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0);
      }
   }
</style>
</head>
<body>
   <div class="clip-polygon"></div>
</body>
</html>