css小知识 - 技术栈

css小知识

sun lover2025-02-09 9:17

1、clip-path

css 复制代码

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none;
<clip-source>：可以是一个 URL，指向一个 SVG <clipPath> 元素。
<basic-shape>：基本形状函数，用于定义裁剪区域的形状，例如 circle()、ellipse()、polygon()、inset() 等。
<geometry-box>：指定基本形状的参考框，例如 border-box、padding-box、content-box 等。
none：表示不进行裁剪，元素将完整显示。

css 复制代码

 /* 圆形裁剪 */
    .circle {
      width: 200px;
      height: 200px;
      background-color: #f00;
      clip-path: circle(50% at 50% 50%); //半径，at 圆心
    }

    /* 椭圆形裁剪 */
    .ellipse {
      width: 300px;
      height: 200px;
      background-color: #0f0;
      clip-path: ellipse(50% 30% at 50% 50%);//水平半径和垂直半径，可以是长度值或百分比 at圆心
    }

    /* 多边形裁剪 */
    .polygon {
      width: 200px;
      height: 200px;
      background-color: #00f;
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%);//多边形的顶点 按照点的顺序连接四个点
    }

    /* 矩形裁剪 */
    .inset {
      width: 200px;
      height: 200px;
      background-color: #ff0;
      clip-path: inset(10% 20% 30% 40%); //上右下左裁剪距离
    }

2、shape-outside

它允许你定义一个浮动元素的形状，使得周围的内联内容（如文本）可以围绕该形状进行布局，而不是传统的矩形环绕

css 复制代码

shape-outside: <shape-box> | <basic-shape> | <image> | none;