1

Как реализовать у блока для его границы размытие т.е свойство filter, если самому блоку задать свойство filter, то размывается весь блок и внутренний контент.

1
  • 1
    Создать второй блок, у которого будет только бордер без контента, и наложить поверх контента
    – andreymal
    17 июн 2020 в 16:25

3 ответа 3

3

Вариант такой

.border-blur {
  display: block;
  width: 300px;
  height: 150px;
  background: #09f;
  padding: 5px;
  position: relative;
  box-sizing: border-box;
}

.border-blur::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(5px);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.border-wrap {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  z-index: 2;
}
<div class="border-blur">
  <div class="border-wrap"></div>
</div>

Или без границы, чисто размытый.

.border-blur {
  display: block;
  width: 300px;
  height: 150px;
  padding: 5px;
  position: relative;
  box-sizing: border-box;
}

.border-blur::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #09f;
  filter: blur(5px);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.border-wrap {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  z-index: 2;
}
<div class="border-blur">
  <div class="border-wrap"></div>
</div>

Варианты выше лучше использовать, если фон - градиент или изображение.
Если просто цвет, то лучше использовать box-shadow

.border {
  display: block;
  width: 300px;
  height: 150px;
}

.border.blur-1 {
  box-shadow: 
    0 0 0 5px #09f,
    0 0 10px 5px #09f;
}

.border.blur-2 {
  box-shadow: 0 0 5px 0 #09f;
}
<div class="border blur-1"></div>
<br><br>
<div class="border blur-2"> </div>

2

Если не пугает relative у блока, можно сделать через before;

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #111;
}

.blur-border {
  --border-color: lightgreen;/* можно задать цвет в инлайн стиле */
  position: relative;
  width: fit-content; /* подгоняем под содержимое */
  height: fit-content;
  margin: 10px; /* запасаем место для размытия */
  color: var(--border-color); 
}

.blur-border::before{
  content: '';
  display: inline-block;
  position: absolute;
  top:0; /* растягиваем под размер блока */
  left:0;
  right:0;
  bottom:0; 
  margin: -8px; /* делаем отступ наружу*/
  border: 3px solid var(--border-color);
  filter: blur(2px);
}
<div class="blur-border" style="--border-color: lightgreen">
  NEON
</div>
<div class="blur-border" style="--border-color: yellow">
  NEON
</div>
<div class="blur-border" style="--border-color: red">
  NEON
</div>

1
  • 2
    А если relative пугает, то можно через display: grid без absolute на псевдоэлементе.
    – Qwertiy
    12 апр 2023 в 14:13
1

Для создания эффекта размытия под рамкой, необходимо использовать псевдоэлемент в котором, с помощью маски, вырезана внутренняя часть. Затем применяем фильтр размытия, но не filter, а backdrop-filter, чтобы размывать не саму рамку, а фон за ней:

/* For example only --> */ body{margin:0;display:flex;justify-content:space-evenly;align-items: center;min-height:100vh;background:0 0/100% linear-gradient(to left,#fff0 5%,#fffc 15% 20%,#fff0 30%),0 0/50% url('https://i.stack.imgur.com/VtZXe.jpg');color:#f22;text-shadow:-1px -1px #fff,1px 1px #000;font:bold 16px/1em courier new,monospace;}

.edge {
  position: relative;
  padding: .5em;
  font: bold 48px/1em segoe script, comic sans ms, cursive;
}
.edge::before {
  content:'';
  position: absolute;
  top: calc(var(--pad, 15px) * -1); bottom: calc(var(--pad, 15px) * -1);
  left: calc(var(--pad, 15px) * -1); right: calc(var(--pad, 15px) * -1);
  z-index:-1;
  border: solid var(--size, 30px) #fff1;
  --mask: linear-gradient(#000 0 0);
  -webkit-mask: var(--mask) padding-box, var(--mask);
  -webkit-mask-composite: xor;
  mask: var(--mask) padding-box exclude, var(--mask);
  backdrop-filter: blur(var(--blur, 2.5px));
}
<div class="edge">backdrop-filter</div>    <!-- Only for example --><div><div>WIDTH</div><input type="range" min="1" max="50" step="1" value="30" oninput="document.body.style.setProperty('--size', `${this.value}px`);this.previousElementSibling.textContent=`WIDTH: ${this.value}px`"><div>PADDING</div><input type="range" min="1" max="30" step="1" value="15" oninput="document.body.style.setProperty('--pad', `${this.value}px`);this.previousElementSibling.textContent=`PADDING: ${this.value}px`"><div>BLUR</div><input type="range" min="0.1" max="5" step="0.05" value="2.5" oninput="document.body.style.setProperty('--blur', `${this.value}px`);this.previousElementSibling.textContent=`BLUR: ${this.value}px`"></div>

Если же нужно просто имитировать свечение за счёт размытия рамки, то можно воспользоваться свойством box-shadow с комбинацией значений - с inset и без него:

/* For example only --> */ body { margin: 0; display: flex; justify-content: space-evenly; align-items: center; min-height: 100vh; background-image: repeating-linear-gradient(45deg, #000 0 5px, #222 5px 10px); }

.edge {
  padding: 1.5em;
  box-shadow: inset 0 0 .25em 1px currentColor, 0 0 .25em 1px currentColor;
}

.red    { color: #f22e; border-radius: 1000px; }
.yellow { color: #fc0e; }
.green  { color: #4b4e; border-radius:10px 1000px; }
<div class="edge green">GREEN</div>
<div class="edge yellow">YELLOW</div>
<div class="edge red">RED</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.