Коричневый эффект эффекта размытия не гладкий. внутренний квадрат в тени

Question

У меня есть ползунок на моей странице, чтобы изменить значения тени. При некоторых высоких значениях размытия есть нежелательная коробка-подобная разбивка тени, когда она должна быть гладкой тенью полностью. Есть ли вообще избежать этого легко? Спасибо за помощь. P. S. Мне действительно нужно это для работы с «вставкой».

div 
 
{ 
 
    width:200px; 
 
    height:200px; 
 
    border-radius: 100px; 
 
background-color:blue; 
 
-webkit-box-shadow: 169px 129px 300px -15px rgba(0,0,0,1); 
 
-moz-box-shadow: 169px 129px 300px -15px rgba(0,0,0,1); 
 
box-shadow: 169px 129px 300px -15px rgba(0,0,0,1); 
 
}

<div></div>

Answer 1

Для круговой box-shadows размытия не может пойти выше ширины & высота элемента. Распространение может, хотя.

С вашего элемента 200px * 200px, максимальная величина размытия - 200px.

Взгляните ниже на примере, который не поднимается выше 200px и вы увидите, что она создает box-shadow, как и ожидалось

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100px; 
 
    background-color: blue; 
 
    box-shadow: 169px 129px 200px -15px rgba(0, 0, 0, 1); 
 
}

<div></div>

альтернативно значение спрэд может идти выше ширину и высоту элемента, и поэтому вы можете создавать большие спреды.

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100px; 
 
    background-color: blue; 
 
    box-shadow: 169px 129px 0 250px rgba(0, 0, 0, 1); 
 
}

<div></div>

Вы также не очень нужны префиксы, так как CSS3 Box-тень очень хорошо поддерживается. CanIUse

Вы можете прочитать больше о CSS Box тени в MDN Documentation

Answer 2

Если вы хотите выйти за пределы его размеров на форме, чтобы быть размыта:

код создает копию круга, то окрашивает его черный и использует filter:blur(length);

.circle { 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.circle::after { 
 
    position: absolute; 
 
    display: block; 
 
    content: " "; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
} 
 
.circle::before { 
 
    position: absolute; 
 
    display: block; 
 
    content: " "; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-filter: blur(50px); 
 
    filter: blur(50px); 
 
}

<div class="circle"></div>

Вы также можете создать INSET тени таким образом.

Как это работает: 1. Начальная форма - теневой цвет. 2. Установите переполнение: скрытое, чтобы ничто не выходит за пределы формы. 3. Поставьте форму на верхней 4. Пятна форму на верхней

Делая это форма под просвечивает создавая внутренний эффект тени

.circle { 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    background-color: black; 
 
    overflow: hidden; 
 
} 
 
.circle::before { 
 
    position: absolute; 
 
    display: block; 
 
    content: " "; 
 
    border-radius: 50%; 
 
    width: calc(100%); 
 
    height: calc(100%); 
 
    background-color: blue; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-filter: blur(20px); 
 
    filter: blur(20px); 
 
}

<div class="circle"></div>