css3 hr水平线渐变

CSS3是Web开发者必备技能之一，不仅可以改善页面的布局结构, 也可以美化页面的颜色和样式。今天，我们来学习如何用CSS3 hr水平线渐变来美化网页吧。

  hr {
        height:2px;
        border:none;
        background-image: linear-gradient(to right, #f6d365, #fda085);
        margin:30px 0;
}
      

上面这段CSS3代码中，我们首先设置了hr的高度为2px，边框为none，由于hr默认的颜色是黑色，因此我们直接通过设置background-image来设置渐变颜色。其中to right表示从左到右渐变，#f6d365和#fda085分别为渐变起始色和终止色。最后，我们再加上一个margin，用来与其他内容进行区分。

使用这段代码，可以将hr水平线美化成渐变色，更加美观。如果你想要更具创意的效果，可以尝试调整起始色，终止色，及方向等，来满足不同需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！