Как сделать размытие border как на картинке?

Question

Как сделать размытие border как на картинке?

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

Мне нужно сделать размытие border как на картинке, через box shadow не получается, сам border сделан через псевдоэлемент

.masters__item::before{
    position: absolute;
    content: " ";
  
    width: 20px;
    height: 60px;
    left: 0;
    bottom: 0px;

    -webkit-box-shadow: 0px 100px 49px -8px rgba(12, 12, 13, 0.46) inset;
-moz-box-shadow: 0px 100px 49px -8px rgba(12, 12, 13, 0.46) inset;
box-shadow: 0px 100px 49px -8px rgba(12, 12, 13, 0.46) inset;
    border-left: 2PX SOLID #D8A65D;
    border-radius: 0 0 21px 33px;
}

css

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

Answer 1

▲ 1

Например можно сделать так

.masters__item {
  padding: 10px;
  border-radius: 25px;
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.content {
    display: block;
    width: 100%;
    background-color: white;
    height: 100%;
    border-radius: 17px;
    position: relative;
}
.masters__item::before{
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, black 30%, gold 100%);
}

<div class="masters__item">
  <div class="content"></div>
</div>

Как сделать размытие border как на картинке?

Ответы