Исключить границу при использовании border-radius

ProgramBox

Исключить границу при использовании border-radius

Post author:admin
Запись опубликована:3 июня, 2023
Post category:Вопросы по программированию

#css #border #rounded-corners

#css #граница #закругленные углы

Вопрос:

У меня есть, div содержащий 2 div с:

 <div&&t;
    <div id="first"&&t;
        ...
    </div&&t;
    <div id="second"&&t;
        ...
    </div&&t;
</div&&t;

Я хочу добиться следующего поведения:

родительский div -&&t; закругленные углы
дочерний первый div -&&t; закругленные углы вверху
второй дочерний элемент -&&t; закругленные углы внизу
между родительским div и дочерними элементами -&&t; границы от дочерних элементов

Ожидаемый:

Актуально:

Пытаясь получить ожидаемое изображение выше, я использовал следующий код для синего div:

 border-bottom: 10px solid &reen;
border-left: 10px solid &reen;
border-ri&ht: 10px solid &reen;

border-bottom-left-radius: 5px;
border-bottom-ri&ht-radius: 5px;

и для красного div:

 border-top: 10px solid &reen;
border-left: 10px solid &reen;
border-ri&ht: 10px solid &reen;

border-top-left-radius: 5px;
border-top-ri&ht-radius: 5px;

Проблема в том, что border-radius применяется к элементу, включающему border . Итак, поскольку требуемый радиус границы (5 пикселей) меньше границы (10 пикселей) для красного и синего разделов, углы чтения и синего не закруглены.

Я хочу применить border-radius к элементу, исключающему border .

Как я могу это сделать?

1. Не могли бы вы отредактировать свой вопрос, чтобы показать весь соответствующий код, а также изображение того, какой результат вы получаете сейчас? Трудно понять, чего вы хотите достичь и что вы получаете в данный момент

2. @JayCodist, я добавил еще одну картинку. Итак, я хочу получить ожидаемое значение, но я получаю фактическую картину, потому что эти border-radius значения < border .

3. Не могли бы вы показать все соответствующие CSS, которые вы используете для divs?

4. Да, я сделал это, только для внутренних разделов. Это «сложно». Большой — это просто div с border-radius , ничего особенного. Дилемма заключается в том, как закруглить углы с помощью border-radius, если «округление» входит в существующую «границу» (зеленый).

Ответ №1:

Я думаю, для этого вам пришлось бы использовать разные селекторы.

Сначала вам нужно было бы добавить border-radius к вашему родительскому div элементу. Я предлагаю вам добавить класс или идентификатор к родительскому элементу, чтобы на ваши дочерние элементы divs не повлияло border-radius :

 <div class="parent"&&t;
    <div&&t;</div&&t;
    <div&&t;</div&&t;
</div&&t;

 .parent {
    border-radius: 5px;
}

Для дочерних элементов вы можете продолжать использовать идентификаторы для выбора дочерних элементов. Но вы также можете использовать псевдоклассы first-child и last-child для их оформления.

 .parent div:first-child {
  border-top-ri&ht-radius: 5px;
  border-top-left-radius: 5px;
}

.parent div:last-child {
  border-bottom-ri&ht-radius: 5px;
  border-bottom-left-radius: 5px;
}

1. У меня нет проблемы с выбором. Все в порядке. У меня есть специальные CSS-файлы, код которых однозначно идентифицирует элементы. Проблема в том, что «закругленные» углы находятся на границе и не видны (конечно, это называется border-radius , а не paddin&-radius или element-radius ). И я хочу иметь обходной путь для создания границы (зеленой), а также закругления углов для элемента, исключая его границу.

2. О, вы пробовали устанавливать overflow: hidden; для родительского элемента? Может случиться так, что фон дочерних элементов накладывается на закругленные углы. Настройка overflow: hidden; заставляет его оставаться в пределах границ родительского элемента.

Ответ №2:

Вам необходимо применить подходящее дополнение к содержащему div для достижения целевого дизайна:

 #wrapper
{
  paddin&: 2rem;
  border-radius: 1rem;
  color: &reen;
  width: 8rem;
  mar&in: 1rem auto;
  display: flex;
  flex-direction: column;
  back&round-color: &reen;
}
#first
{
  back&round-color: red;
  hei&ht: 4rem;
  border-radius: 1rem 1rem 0 0;
}
#second
{
  back&round-color: blue;
  hei&ht: 4rem;
  border-radius: 0 0 1rem 1rem;
}

 <div id="wrapper"&&t;
    <div id="first"&&t;
    </div&&t;
    <div id="second"&&t;
    </div&&t;
</div&&t;

Развернуть фрагмент

Вот рабочее перо: https://codepen.io/jaycodist/pen/LYNVeON