Радиус границы сглаживания Проблема при использовании значений rgba

Question

У меня проблема с тем, что когда я использую радиус границы в комбинации цветов, оцениваемых по rgba, например, скажем rgba(255,255,255,.8), а затем использую box-shadow, чтобы сделать окно несколько перьями, я получаю проблему, что углы несплошной, как видно на этом изображении.

Деталь верхнего левого угла:

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

Я пробовал совсем немного, но безбольшой успех, вот попытка кода, так как я хотел попробовать это для другого проекта, но просто скопировал его здесь: https://jsfiddle.net/01u7gbxa/1/

Сам код может быть применен к любому объекту, так что кажется, что он разрешает те же результаты:

  background:rgba(0,0,0,.8);
  box-shadow:0 0 15px 30px rgba(0,0,0,.8);
  border-radius:60px;

Кто-нибудь знает, можно ли вообще это исправить?

Заранее спасибо за дополнительную информацию.

Answer 1

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

body {
  background: #f00;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.box {
  width: 500px;
  height: 200px;
  border-radius: 60px;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: rgba(0, 0, 0, .8);
  border-radius: inherit;
  filter: blur(10px);
}

<div class="box"></div>

Answer 2

Измените эти значения:

  background:rgba(0,0,0,.8);
    box-shadow:0 0 15px 30px rgba(0,0,0,.8);

на эти значения:

   background-color: #000;
   box-shadow:0 0 15px 30px #000;
   opacity : 0.8;