Question

我正在试图弄清楚如何制作一个有渐变的边框。这是捕获 - 边界不在div的边缘，所以我不能使用旧的put-a-div-inside-a-div-and-make-the-background-div-background-gradient trick 。渐变也必须重复。我已经使用了一个子div来创建父div中边框的效果，但现在我也需要使它成为渐变。举个例子，我实际上是想让它与本页底部div的边框完全一样：waysidefinehomes.com。这里的那些只是背景图像所以我不能使用它们，我需要这个网站来响应。有什么想法吗？提前谢谢！

Answer 1

在查看网站后，您将链接到使用带有所需渐变的div的内容，然后再添加两个div。一个有一个胖边框而没有填充，另一个有宽边距，这应该提供透视间隙所需的背后渐变。

Answer 2

您可以使用径向渐变来实现背景。

＆＃13;

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

＆＃13;

<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>

＆＃13;

接下来的步骤是在文本周围添加一个div内部的轻微1px边框。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

尝试使用背景div渐变而不使用渐变边框

2 个答案: