仅使用 CSS 创建漂亮的水平线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15215556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a beautiful horizontal line with CSS only
提问by Mick
There is a tutorial hereon how to do this in photoshop:
有一个教程在这里就如何做到这一点在Photoshop：
I am trying to do this with CSS only. The closer I could get is in this fiddle.
我试图只用 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>
Doing a gradient on the shadow seems pretty tough. Any ideas how I could improve this?
在阴影上做渐变看起来很困难。有什么想法可以改进吗？
回答by thgaskell
I would use a radial-gradientto a pseudo-element instead of a box-shadowsince it tapers off towards the edges nicer.
我会使用 aradial-gradient到一个伪元素而不是 abox-shadow因为它向边缘逐渐变细。
Position the radial-gradientabove 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.
将其radial-gradient放在上面<hr>，使其切成两半。然后在 正下方放置另一个伪元素<hr>，其颜色与背景相同，高度刚好足以覆盖渐变的其余部分。
CSS
CSS
hr.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;
}
回答by Allen
Please have a look at https://codepen.io/ibrahimjabbari/pen/ozinB. This website provide 18 styles of horizontal lines. Some seem awesome.
请查看https://codepen.io/ibrahimjabbari/pen/ozinB。本网站提供18种风格的水平线。有些看起来很棒。
Following is an example.
下面是一个例子。
hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
回答by Jerry Jones
Here is the simplest form to achieve this:
这是实现此目的的最简单形式：
hr{
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
