gpt4 book ai didi

html - 如何在 css 中创建两个形状的联合并将阴影应用于最终形状?

转载 作者:行者123 更新时间:2023-12-01 13:56:23 25 4
gpt4 key购买 nike

我主要是一名设计师,但我正在使用一些基本的 html 和 css 制作一个模拟 html 文档来演示我的设计的可实现性。下面是我在 figma 上设计的自定义形状。
My design on 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 属性)
The result I got from the code above (without the dropshadow property)
现在,当我尝试添加 shadow 属性时,它看起来如下所示,(这不是我期待的预期结果)
结果我获得了单独应用的阴影
Result I obtained with shadows applied separately
为了解决这个问题,我尝试了以下方法
  • 我从单个元素中删除了 shadow 属性。
  • 将属性添加到两个元素的父元素,如下所示
  •    #topLabel {
    box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
    }
    当我这样做时,shadow 属性没有应用于任何元素,看起来像添加阴影之前的那个。
    我认为,我对主题缺乏了解是我无法使用谷歌找到解决方案的原因。请在这件事上指导我。

    最佳答案

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

    #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;
    }

    这是我得到的结果:
    Solution Result

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

    关于html - 如何在 css 中创建两个形状的联合并将阴影应用于最终形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59711565/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com