nodejs30 (UI相关) : CSS 剪辑路径clip-path导致伪元素不可见问题及解决方法

FakeOccupational

已于 2025-02-15 16:33:43 修改

阅读量797

点赞数 13

CC 4.0 BY-SA版权

分类专栏：服务化&架构文章标签： css 前端

于 2024-11-29 19:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/ResumeProject/article/details/144012769

完整问题代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>After Rectangle Fix</title>
  <style>
    .rounded-rectangle-clip {
   
   
      position: relative; /* 让伪元素相对父元素定位 */
      width: 200px;
      height: 100px;
      background-color: #ff5722; /* 背景色 */
      clip-path: inset(0 round 20px); /* 应用圆角裁剪 */
      margin: 50px auto; /* 居中显示 */
      overflow: visible; /* 确保伪元素可见 */
    }

    .rounded-rectangle-clip::after {
   
   
      content: ""; /* 必须设置以渲染伪元素 */
      position: absolute; /* 相对于父元素定位 */
      top: 100%; /* 放置在父元素下方 */
      left: 0; /* 左对齐 */
      width: 200px; /* 宽度与父元素一致 */
      height: