Border radius по углам появляются белые линии

Question

Border radius по углам появляются белые линии

Рейтинг: 0Ответов: 3Опубликовано: 10.01.2023

Уже сломал голову, может кто знает как убрать эти артефакты(белые линии) в нижних углаx? P.S. Закругление в низу обязательно, т.к. там будет фото

 body {
        background: #000;
        box-sizing: border-box;
        padding: 0;
        margin: 0; 
        height: 300px;
    }
    .wrapper {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        border-radius: 0px 0px 20px 20px;
    }
    .link1 {
        background: url('https://i.ytimg.com/vi/qqaU5JbJv70/hqdefault.jpg');
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
       
    }
    .block2 {
        position: absolute;
        bottom: 0;
        height: 100px;
        background: rgba(0,0,0,0.8);
        left: 0;
        z-index: 10;
        width: 100%;
    }

<html>
<body>
    <div class="wrapper">
        <a class="link1"></a>
        <div class="block2"></div>
    </div>
</body>
</html>

css html css3

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

Пример

body {
  background: #000;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  height: 300px;
}

.wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;  
  z-index: 9;
}

.link {
  background: url('https://i.ytimg.com/vi/qqaU5JbJv70/hqdefault.jpg');
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  border-radius: 0 0 20px 20px;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: rgba(0, 0, 0, .8);  
  z-index: 10;  
}

<div class="wrapper">
  <a class="link" href="#"></a>
</div>

Answer 2

▲ 0

Во-первых, вынесем CSS как положено отдельно, хотя бы в блок <style>.
Дополнительный блок-обёртку, у которого был задан аттрибут style="height: 100%" убираем за ненадобностью.

<html>
<style>
    body {
        background: #000;
        box-sizing: border-box;
        padding: 0;
        margin: 0; 
        height: 300px;
    }
    .wrapper {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        border-radius: 0px 0px 20px 20px;
    }
    .link1 {
        background: #fff;
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
    }
    .block2 {
        position: absolute;
        bottom: 0;
        height: 100px;
        background: #8a8a8a;
        left: 0;
        z-index: 10;
        width: 100%;
    }
</style>

<body>
    <div class="wrapper">
        <a class="link1"></a>
        <div class="block2"></div>
    </div>
</body>
</html>

У блока-обёртки, тот у которого класс wrapper, задаём свойство border-radius: 0px 0px 20px 20px; и получаем блок со скруглёнными внизу краями.
А казались Вам какие-то артефакты потому что внизу белого блока, ссылки, был ещё один блок того же цвета, что и фон. Его цвет я поменял на серый, чтобы было видно.
Теперь весь этот контент страницы, состоящий из ссылки и второго блока будет скругляться только внизу. Если нужно скругление всех углов, то верните border-radius: 20px;.

Answer 3

▲ 0

Мне помогло использование цвета заливки с альфа-каналом:

background: rgba(8, 168, 168, 0.8);

может, еще кому поможет.

Border radius по углам появляются белые линии

Ответы