css小知识

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;
相关推荐
GIS之路7 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴15 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥18 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记29 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er41 分钟前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客2 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim2 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js