用CSS创建一个漂亮的水平线

本文介绍了用CSS创建一个漂亮的水平线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 这里有一个教程。 hr.fancy-line { border：0; height：1px; background-image：-webkit-linear-gradient（left，rgba（0,0,0,0），rgba（215,215,215,0.75），rgba（0,0,0,0））; background-image：-moz-linear-gradient（left，rgba（0,0,0,0），rgba（215,215,215,0.75），rgba（0,0,0,0））; background-image：-ms-linear-gradient（left，rgba（0,0,0,0），rgba（215,215,215,0.75），rgba（0,0,0,0））; background-image：-o-linear-gradient（left，rgba（0,0,0,0），rgba（215,215,215,0.75），rgba（0,0,0,0））; box-shadow：0px -2px 4px rgba（136,136,136,0.75）; } < hr class =fancy-line>< / hr> 在阴影上做梯度似乎很难。 任何想法如何改善这个？解决方案我会使用 到伪元素，而不是 box-shadow ，因为它向边缘逐渐变细。 将 radial-gradient 放在< hr> 上方，以便将其切成两半。然后将另一个psuedo-element放置在< hr> 下面，颜色与背景颜色相同，高度刚好足以覆盖渐变的其余部分。 更新JSFiddle CSS hr.fancy- { border：0; height：1px; } hr.fancy-line：before { top：-0.5em; height：1em; } hr.fancy-line：after { content：''; height：0.5em; top：1px; } hr.fancy-line：before，hr.fancy-line：after { content：''; position：absolute; width：100％; } hr.fancy-line，hr.fancy-line：before { background：radial-gradient（椭圆在中心，rgba（0,0,0,0.1 ）0％，rgba（0,0,0,0）75％）; } body，hr.fancy-line：after { background：＃f4f4f4; } There is a tutorial here on how to do this in photoshop:I am trying to do this with CSS only. The closer I could get is in this fiddle. hr.fancy-line { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); box-shadow: 0px -2px 4px rgba(136,136,136,0.75);}<hr class="fancy-line"></hr>Doing a gradient on the shadow seems pretty tough.Any ideas how I could improve this? 解决方案 I would use a radial-gradient to a pseudo-element instead of a box-shadow since it tapers off towards the edges nicer.Position the radial-gradient above the <hr> so that it's cut in half. Then position another psuedo-element just below the <hr>with a the same color as the background and height just large enough to cover the rest of the gradient.Updated JSFiddleCSShr.fancy-line { border: 0; height: 1px;}hr.fancy-line:before { top: -0.5em; height: 1em;}hr.fancy-line:after { content:''; height: 0.5em; top: 1px;}hr.fancy-line:before, hr.fancy-line:after { content: ''; position: absolute; width: 100%;}hr.fancy-line, hr.fancy-line:before { 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;} 这篇关于用CSS创建一个漂亮的水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！