Question

答案中有一个很棒的hr渐变（他链接的jsfiddle显示更新的css） - Create a beautiful horizontal line with CSS only。这正是我所追求的，但我希望渐变显示在线下方而不是在线上方。

html非常简单 -

hr.fancy-line {
  border: 0;
  height: 1px;
  position: relative;
  margin: 0.5em 0;
  /* Keep other elements away from pseudo elements*/
}
hr.fancy-line:before {
  top: -0.5em;
  height: 1em;
}
hr.fancy-line:after {
  content: '';
  height: 0.5em;
  /* half the height of :before */
  top: 1px;
  /* height of hr*/
}
hr.fancy-line:before,
hr.fancy-line:after {
  content: '';
  position: absolute;
  width: 100%;
}
hr.fancy-line,
hr.fancy-line:before {
  background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
body,
hr.fancy-line:after {
  background: #f4f4f4;
}

<hr class="fancy-line"></hr>

我尝试了各种不同的东西，但无法让它发挥作用，而且每当我改变它时，线条本身就会消失。

请有人帮忙......谢谢

Answer 1

hr.fancy-line:after {
    content:'';
    height: 0.5em;   
    top: -8px;  /*change or bottom:0; */
}

hr.fancy-line {
  border: 0;
  height: 1px;
  position: relative;
  margin: 0.5em 0;
}
hr.fancy-line:before {
  top: -0.5em;
  height: 1em;
}
hr.fancy-line:after {
  content: '';
  height: 0.5em;
  top: -8px; /*or bottom:0; */
}
hr.fancy-line:before,
hr.fancy-line:after {
  content: '';
  position: absolute;
  width: 100%;
}
hr.fancy-line,
hr.fancy-line:before {
  background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
body,
hr.fancy-line:after {
  background: #f4f4f4;
}

<hr class="fancy-line"></hr>

在线下方创建hr径向渐变

1 个答案: