使用 HTML 和 CSS 创建水平线的正确方法是什么？-css-IT问答社区-解决你的IT疑问

使用 HTML 和 CSS 创建水平线的正确方法是什么？

scibuff 2月前

我需要在某个块后画一条水平线，有三种方法可以做到：1）定义一个 h_line 类并向其添加 css 功能，如#css.hline { width:100%; height:1px; background: #fff...

我需要在某个块后画一条水平线，有三种方法可以做到这一点：

1）定义一个类 h_line 并向其添加 CSS 特性，例如

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2）使用 hr 标签

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

伪类 after 一样使用它

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

哪种方式最实用？

帖子版权声明 1、本帖标题：使用 HTML 和 CSS 创建水平线的正确方法是什么？
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由scibuff在本站《css》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Kosar Mohammadzadeh 2月前 0 只看Ta

引用 2楼

是否可以仅使用 CSS 来切出一个空心圆？我们都可以做到：但是我们可以这样做吗？圆必须是空心且透明的。因此，通过放置纯色并不能解决问题。

仅使用 剪出一个空心圆圈 可以 CSS 吗？

我们都可以做到：

但我们能做到吗？

圆圈 必须是空心且透明的 。因此，将实心颜色的圆圈放在 div .
K Boykin 2月前 0 只看Ta

引用 3楼

在 HTML5 中

element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section).
humbleStrength 2月前 0 只看Ta

引用 4楼
您可以使用两种不同的技术来实现 透明的剪切圆圈 ：

1.SVG

以下示例使用内联 svg 。第一个代码片段使用 mask 元素剪切出透明圆圈，第二个空心圆圈使用 path 元素。圆圈由 2 个 arc 命令 :

使用 mask 元素：
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<svg viewbox="0 0 100 50" width="100%"> <defs> <mask id="mask" x="0" y="0" width="80" height="30"> <rect x="5" y="5" width="90" height="40" fill="#fff"/> <circle cx="50" cy="25" r="15" /> </mask> </defs> <rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/> </svg>
使用一个路径元素：
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;} svg{ display:block; width:70%; height:auto; margin:0 auto; } path{ transition:fill .5s; fill: rgba(227, 223, 210, .8); } path:hover{ fill:pink; }

<svg viewbox="-10 -1 30 12"> <path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/> </svg>
在这种情况下使用 SVG 的主要优点是：
- 更短的代码
- 您可以轻松地使用图像或渐变来填充圆形蒙版
- 保持形状的边界并仅在符合蒙版的填充上触发鼠标事件（ 在示例中将 鼠标悬停在透明的剪切圆圈上
2.CSS 仅使用 BOX-SHADOWS

创建一个 div， overflow:hidden; 并在其内部创建一个带有 border-radius 的圆形伪元素。给它一个巨大的 box-shadow 并且没有背景：
div{ position:relative; width:500px; height:200px; margin:0 auto; overflow:hidden; } div:after{ content:''; position:absolute; left:175px; top:25px; border-radius:100%; width:150px; height:150px; box-shadow: 0px 0px 0px 2000px #E3DFD2; } body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<div></div>
浏览器支持 box-shadows 是 IE9+ 请参阅 canIuse

相同的方法是使用边框而不是框阴影。如果您需要支持不支持框阴影的浏览器（如 IE8），那么这很有趣。技术是相同的，但您需要使用顶部和左侧值进行补偿，以将圆圈保持在 div 的中心：
body{ background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'); background-size:cover; } div{ position:relative; width:500px; height:200px; margin:0 auto; overflow:hidden; } div:after{ content:''; position:absolute; left:-325px; top:-475px; border-radius:100%; width:150px; height:150px; border:500px solid #E3DFD2; }

<div></div>
Chen Hanhan 2月前 0 只看Ta

引用 5楼
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

<div>Hello</div> <hr/> <div>World</div>
操作方式如下 html5boilerplate ：
```
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
```
Andy Affo Forward 2月前 0 只看Ta

引用 6楼

非常感谢 box-shadow，天啊为什么我没有想到这个！:/ 我知道可以使用一些超出边界的圆圈来完成。但你成功了！
Marc Grue 2月前 0 只看Ta

引用 7楼

注意：如果您希望它始终位于页面的中心，请使用 margin: 1em auto。
Michael Bahl 2月前 0 只看Ta

引用 8楼

注意如果在 Safari 中使用 box-shadow，它们不可见，但边框可见。请使用它们。
A T 2月前 0 只看Ta

引用 9楼

@JacquesMarais，不确定这是否有必要，因为它是一个没有定义宽度的块元素，所以无论如何它都会跨越整个容器的宽度。
Satish Burnwal 2月前 0 只看Ta

引用 10楼
可以使用径向渐变背景和指针事件来实现（允许鼠标通过圆形层进行交互，例如文本选择）。这是 一个演示页面 和一个屏幕截图：

它的代码如下：
body { margin: 0; padding: 0; } .underneath { padding: 0; margin: 265px 0 0 0; width: 600px; } .overlay { top: 0; left: 0; position: absolute; width: 600px; height: 600px; background: -moz-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px); background: -webkit-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px); background: -ms-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px); background: -o-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px); pointer-events: none; /* send mouse events beneath this layer */ }

<body> <p class="underneath"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <div class="overlay"></div> </body>
xerox0213 2月前 0 只看Ta

引用 11楼

我会选择语义标记，使用 <hr/> .

除非您想要的只是边框，否则您可以使用填充、边框和边距的组合来获得所需的边界。
Rafaela 2月前 0 只看Ta

引用 12楼

@chris 不客气。如果你对矩形穿孔窗感兴趣，我之前发过一个类似的答案：.com/questions/7979675/…
Bengt 2月前 0 只看Ta

引用 13楼

is valid HTML5. It used represent a horizontal rule, but is now defined in semantic terms as a thematic break between content. Most browsers will still display it as a horizontal line unless told otherwise. Source: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
Michaella 2月前 0 只看Ta

引用 14楼

标题说水平线和

is that so I up this. Title maybe should have read styled horizontal line.
raphaelauv 2月前 0 只看Ta

引用 15楼

然而，这会产生一个边缘非常“粗糙”的圆，因此，如果有人能提出一种可以产生漂亮渲染的穿透圆的解决方案，我们将非常欢迎。
Jepessen 2月前 0 只看Ta

引用 16楼

@RyanBayne ...但是但是但是... hr = 水平线，而不是线:)
BlessedHIT 2月前 0 只看Ta

引用 17楼

@chris 如果圆圈的大小是固定的，则使用居中的背景图像，但保留指针事件部分。如果大小变化，则可以使用 SVG 为 WebKit developer.mozilla.org/en/CSS/-webkit-mask 和 Firefox developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content 创建蒙版
Yash Maheshwari 2月前 0 只看Ta

引用 18楼
.line { width: 53px; height: 0; border: 1px solid #C4C4C4; margin: 3px; display:inline-block; }

<html> <body> <div class="line"></div> <div style="display:inline-block;">OR</div> <div class="line"></div> </body> </html>
XAMlMAX 2月前 0 只看Ta

引用 19楼

@BenRacicot 小提琴没坏。复制粘贴在这里：output.jsbin.com/wibiyawawi
Victoria 2月前 0 只看Ta

引用 20楼

在 HTML5 中，该 <hr> 标签定义主题分隔符。在 HTML 4.01 中，该 <hr> 标签表示水平规则。

http://www.w3schools.com/tags/tag_hr.asp

因此，在定义之后，我更喜欢 <hr>