纯css实现内凹圆角-书签笔记本模式

星野-纯夏

已于 2023-12-22 15:51:30 修改

阅读量935

点赞数 1

文章标签： css css3 html

于 2023-03-09 11:24:39 首次发布

本文链接：https://blog.csdn.net/weixin_39370315/article/details/129418581

版权

写在之前
其实这篇博客为何记录，是因为在前端技术微信群中，有群友问到此类内凹圆角问题，自然是想了解下他遇到的难点。
在这里插入图片描述

实现效果如下

在这里插入图片描述

代码实现如下
由于这里有边框的存在，这就导致，我们的圆角参数的设置，得覆盖到上方边框进行，遮挡，否则就达不到实际效果，具体代码请参看如下

<html>

<head>
  <meta charset="utf-8" />
  <title>border-raduis 实现内凹圆角</title>
  <style type="text/css">
       :root {
     
      box-sizing: border-box;
      /* 圆角半径 */
      --border-raduis-size: 32px;
      /* 边框宽度 */
      --border-width: 8px;
      /* 我们的相连接部分的圆角进行衔接，需要对边框进行覆盖，这里和边框宽度为相反数 */
      --offset-width: -8px;
      /* 左边框的颜色 */
      --left-box-border-color: #fdc3c5;
      /* 右边框的颜色 */
      --right-box-border-color: #fe696c;
    }

    *,
    *::after,
    *::before {
     
      box-sizing: inherit;
    }

    .container {
     
      display: flex;
      justify-content