在有阴影的线上实现一个圆圈[重复]答案

【问题标题】：Implement a circle on a line with shadow [duplicate]在有阴影的线上实现一个圆圈[重复]
【发布时间】：2021-12-21 00:11:27
【问题描述】：

我有一个带有react的测试项目。我想实现一张半圆的卡片，如下所示：

我试过实现这个，但我做不到。这是我的工具图片：

我认为 mycircle shadow 是错误的。

这是 html 和 CSS 代码：

.card__container{
  padding:1.75rem;
  margin-top:1.25rem;
  margin-bottom:2.5rem;
  margin-left:2.5rem;
  margin-right:2.5rem;
  position:relative;
  overflow:hidden;
  height:100vh;
  box-shadow: 0 0 8px 0 rgba(0,0,0,.08);
}

.card__container:after{
content: '';
    position: absolute;
    display: block;
    width: 30px;
    top: 110px;
    left: -10px;
    height: 30px;
    border: 1px solid crimson;
    border-radius: 50%;

}

<div className="card__container">

</div>

如果有人能提供帮助，我将不胜感激。

【问题讨论】：

我建议使用 Photoshop 之类的工具创建自定义边框并将其用作边框。

标签： javascript html css reactjs sass

【解决方案1】：

你可以在 :before 中使用内阴影，在左侧使用 :before 元素来隐藏外框的阴影：

<html>
  <head>
    <style>
      .card-container {
        padding: 1.75rem;
        margin-top: 1.25rem;
        margin-bottom: 2.5rem;
        margin-left: 2.5rem;
        margin-right: 2.5rem;
        position: relative;
        /*overflow: hidden;*/
        height: 60vh;
        width: 50vw;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.98);
      }

      .card-container:after {
        content: "";
        position: absolute;
        display: block;
        width: 30px;
        top: 50px;
        left: -15px;
        height: 30px;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background-color:white;
        box-shadow: inset -7px 0 8px -7px rgba(0, 0, 0, 0.98);
      }
    </style>
  </head>
  <body>
    <div class="card-container">
    </div>
  </body>
</html>

【讨论】：