Я в основном дизайнер, но я делаю макетный html документ, используя некоторые основы c html и css, чтобы продемонстрировать реализуемость моего дизайна. Ниже приведена пользовательская форма, которую я разработал на фиг.
Теперь я едва знаком с 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;
}
Результат, полученный из кода выше (без тени) свойство)
Теперь, когда я попытался добавить свойство тени, оно выглядело так, как показано ниже (что не является ожидаемым результатом, которого я ожидал)
Результат, который я получил с тенями, примененными отдельно
Чтобы решить эту проблему, я попытался сделать следующее:
- Я удалил свойство тени из отдельных элементов.
- Добавлено свойство для родительского элемента обоих элементов, как показано ниже
#topLabel {
box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
}
Когда я это сделал, свойство shadow не было применено ни к одному элементу и выглядело как один до того, как тень была добавлена.
Полагаю, мое отсутствие знаний по предмету является причиной моей неспособности найти решение для этого с помощью Google. Пожалуйста, направьте меня в этом вопросе.