css - 尝试在不使用背景 div 渐变的情况下制作渐变边框

Question

我正在尝试弄清楚如何制作具有渐变的边框。这是问题 - 边框不在 div 的最边缘，所以我不能使用旧的 put-a-div-inside-a-div-and-make-the-background-div's-background-gradient 技巧.梯度也必须是重复的。我已经使用子 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>

下一步是在文本周围添加一个 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>