Попытка сделать градиентную границу БЕЗ использования фонового градиента div

Question

Я пытаюсь выяснить, как создать границу с градиентом. Вот уловка - граница не находится на самом краю div, поэтому я не могу использовать старый трюк put-a-div-inside-a-div-and-the-background-div-the-background-gradient , Градиентное nalso должно повторяться. Я уже использовал дочерний div, чтобы создать эффект границы внутри родительского div, но теперь мне нужно сделать его градиентом. Например, я на самом деле пытаюсь сделать это точно так же, как границы вокруг div в нижней части этой страницы: waysidefinehomes.com. Те, что здесь, являются лишь фоновыми изображениями, поэтому я не могу их использовать, мне нужен этот сайт, чтобы быть отзывчивым. Есть предположения? Заранее спасибо!

Answer 1

Вы можете получить фон с радиальным градиентом.

div { 
 
    width: 500px; 
 
    height: auto; 
 
    overflow: auto; 
 
    border-radius: 10px; 
 
    background: radial-gradient(at 30% 20%, #ededed, #d6d1c7); 
 
    padding: 20px; 
 
    margin-bottom: 20px; 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet quam massa. Aliquam et felis tempor, auctor lectus id, mattis quam. Ut ante libero, porta et ante nec, porttitor mattis sapien. Vestibulum porta bibendum lorem quis tristique. Pellentesque 
 
    vestibulum, enim sed malesuada facilisis, lacus magna faucibus justo, sit amet venenatis metus metus sed purus. Sed vehicula mi et eleifend lacinia. Nunc eu auctor sem. Morbi vel pellentesque nibh. Aliquam convallis malesuada elit, in tincidunt sapien 
 
    congue vitae. Etiam maximus eget neque eu dignissim. Aenean ut turpis at metus ullamcorper vehicula a non enim. Nullam tristique placerat odio vel molestie. Fusce commodo, sem vel aliquam tempus, est nibh consectetur nisi, et congue lorem arcu eu nibh. 
 
    Morbi placerat malesuada urna posuere cursus. Nullam risus urna, mollis sit amet urna id, convallis pellentesque ligula.</div>

Следующим шагом будет добавление DIV внутри для этого небольшого 1px границы, которая идет вокруг текста.

div.outside { 
 
    width: 500px; 
 
    height: auto; 
 
    overflow: auto; 
 
    border-radius: 10px; 
 
    background: radial-gradient(at 30% 20%, #ededed, #d6d1c7); 
 
    padding: 10px; 
 
    margin-bottom: 20px; 
 
    box-sizing: border-box; 
 
} 
 
div .inside { 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    background: transparent; 
 
    border-radius: 5px; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
}

<div class="outside"> 
 
    <div class="inside"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet quam massa. Aliquam et felis tempor, auctor lectus id, mattis quam. Ut ante libero, porta et ante nec, porttitor mattis sapien. Vestibulum porta bibendum lorem quis tristique. Pellentesque 
 
    vestibulum, enim sed malesuada facilisis, lacus magna faucibus justo, sit amet venenatis metus metus sed purus. Sed vehicula mi et eleifend lacinia. Nunc eu auctor sem. Morbi vel pellentesque nibh. Aliquam convallis malesuada elit, in tincidunt sapien 
 
    congue vitae. Etiam maximus eget neque eu dignissim. Aenean ut turpis at metus ullamcorper vehicula a non enim. Nullam tristique placerat odio vel molestie. Fusce commodo, sem vel aliquam tempus, est nibh consectetur nisi, et congue lorem arcu eu 
 
    nibh. Morbi placerat malesuada urna posuere cursus. Nullam risus urna, mollis sit amet urna id, convallis pellentesque ligula. 
 
    </div> 
 
</div>

Answer 2

после просмотра сайта, с которым вы связались, с использованием div с требуемым градиентом, а затем добавив еще два divs. Один с жирной границей и без заполнения, а другой с широкими полями, это должно обеспечить видимый промежуток, необходимый для градиента позади.