4

我主要是一名设计师，但我正在使用一些基本的 html 和 css 制作一个模拟 html 文档来展示我的设计的可实现性。下面是我在 figma 上设计的自定义形状。

我在 Figma 上的设计

现在，我几乎不熟悉 html 或 css，但通过一些基本的谷歌搜索，我能够在 css 中创建我想要的形状。下面是我用来实现在代码下方图像中看到的结果的 html 和 css 的代码片段。

/* Html Part */
<body>
    <div id="topLabel">
        <div id="topLabelRectangle"></div>
        <div id="topLabelCircle"></div>
    </div>
</body>

/*CSS Part*/
#topLabelRectangle {
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 90%;

background: #FFFFFF;
border-radius: 0px 0px 50px 50px;
//box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
}

#topLabelCircle {
position: absolute;
left: 47%;
right: 47%;
top: 4.5%;
bottom: 83%;
background: #FFFFFF;

//box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
border-radius: 250px;
}

我从上面的代码中得到的结果（没有 dropshadow 属性）

我从上面的代码中得到的结果（没有 dropshadow 属性）

现在，当我尝试添加 shadow 属性时，它看起来如下所示（这不是我期望的结果）

我通过单独应用阴影获得的结果

我通过单独应用阴影获得的结果

为了解决这个问题，我尝试了以下

  1. 我从单个元素中删除了 shadow 属性。
  2. 将属性添加到两个元素的父级，如下所示
   #topLabel {
       box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
   }

当我这样做时，阴影属性没有应用于任何元素，并且看起来像添加阴影之前的那个。

我想，我对这个主题缺乏了解是我无法使用谷歌找到解决方案的原因。请在这件事上指导我。

4

1 回答 1

2

所以，我找到了解决我的问题的方法，只需将我的圆改为半圆并将其准确地放置在我的矩形边缘。半圆是通过改变边界半径属性创建的，如下所示，

#topLabelRectangle {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 92.5%;

  background: #FFFFFF;
  border-radius: 0px 0px 25px 25px;
  box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
}

#topLabelCircle {
  position: absolute;
  left: 46.2%;
  right: 46.2%;
  top: 7.5%;
  bottom: 84%;
  background: #FFFFFF;

  box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
  border-radius: 0px 0px 300px 300px;
}

这是我得到的结果： 解决方案结果

但我所做的仍然是某种设计师 jugaad，但我想知道是否有技术上的可能性来获得相同的结果。

于 2020-01-13T07:06:57.033 回答