Div не применяет свойство border-radius - PullRequest
Новая
       4

Div не применяет свойство border-radius

0 голосов
/ 14 ноября 2018

У меня есть тег <div>, к которому нужно применить нижнюю границу и радиус границы, но она не будет работать. 

.part2 {
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10%;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0px;
  padding-bottom: 60px;
  background-color: #fafafa;
}

.part3 {
  background-color: #EFEFEF;
  border-color: pink;
  border-style: solid;
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10%;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0px;
  padding-bottom: 100px;
}
<div class="part2 col-md-12 col-lg-12">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class="part3 col-md-12 col-lg-12 p-t-40">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class="part4 col-md-12 col-lg-12">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

В общем, это выглядит так:

border for part2

Итак, моя проблемаэто: у меня есть страница на моем сайте, которая содержит много <div>.Каждый div как класс .part1, .part2 и т. Д. На них.Мне нужны границы каждого .partX div, чтобы иметь изогнутую границу снизу.Он работает для заголовка, он работает для .part4, но не работает для .part3.Это загадка, и я пытаюсь ее решить.Мне нужно изогнуть границу div.part3, поэтому я использую радиус границы, но он не работает вообще.Почему?

Выше приведен результат кода CSS, который я использовал.Как видите, граница прямая, мне нужно, чтобы она была изогнутой.

1 Ответ

0 голосов
/ 14 ноября 2018

Я могу только предположить, что в дереве наследования стилей есть некоторые плохие практики. Не видя больше макета для проверки, трудно сказать, почему один работает, а другой нет, но я бы поспорил, если вы проверили их в консоли разработчика и обратили внимание на порядок создания классов стилей, которые вы могли бы найти. преступник (s).

Однако большая часть этого может быть консолидирована; 

.part2, .part3, .part4 {
  border-width: 0; /* Not 0px */
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10%;
}

.part2 {
  padding-bottom: 60px;
  background-color: lightblue;
}

.part3 {
  background-color: #EFEFEF;
  border: pink 5px solid;
  padding-bottom: 100px;
}

.part4 {
  padding-bottom: 60px;
  background-color: #0f0;
  border: orange 5px solid;
}
<div class="part2 col-md-12 col-lg-12">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class="part3 col-md-12 col-lg-12 p-t-40">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class="part4 col-md-12 col-lg-12">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Надеюсь, это поможет, ура.

...