使用 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

引用 1楼

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

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

我们都可以做到：

但我们能做到吗？

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

引用 3楼
您可以使用 css 掩码和额外的 svg 图像来实现此目的。
尽管浏览器支持较弱
body { background: url(https://data.whicdn.com/images/50959200/original.jpg); background-size: cover; background-position: center; } .circle { width: 150px; height: 150px; background: black; border-radius: 50%; -webkit-mask: url(https://svgshare.com/i/GLf.svg); -webkit-mask-size: 125%; /* change it */ -webkit-mask-position: center; margin: 20px auto; }

<div class="circle"></div>
KeyC0de 2月前 0 只看Ta

引用 4楼

这取决于要求，但许多开发人员的建议是让你的代码尽可能简单。因此，使用简单的 \'hr\' 标签和 CSS 代码。
Jürgen A. Erhard 2月前 0 只看Ta

引用 5楼
居中线，中间有文本，使用上边距和下边距：
.lineL { width: calc(32vw - 24px); margin-right:2vw; margin-bottom:5px; height: 0; border: 1px solid #a5a5a5; display:inline-block; } .lineR { width: calc(32vw - 24px); margin-left:2vw; margin-bottom:5px; height: 0; border: 1px solid #a5a5a5; display:inline-block; } .line { margin-bottom:40px; margin-top:20px; margin-left:auto; margin-right:auto; width:calc(70vw - 24px); }

<html> <body> <button>Login</button> <div class="line"> <div class="lineL"></div> <div style="display:inline-block;width:24px;">OR</div> <div class="lineR"></div> </div> <button>Logout</button> </body> </html>
Enginer 2月前 0 只看Ta

引用 6楼
方法 1- 首选
```
<div class="circle"></div>
```
```
$radius: 50px;
$thickness: 5px;

.circle {
    width: $radius;
    height: $radius;
    background-color: transparent;
    border-radius: $radius;
    border: $thickness solid gray;
}
```
方法 2
```
<div class="circle"></div>
```
```
$radius: 50px;
$thickness: 5px;

.circle {
  width: $radius;
  height: $radius;
}

.circle::before, .circle::after {
  margin: -2px 0;
}
.circle::before {
    content: '';
    display: inline-block;
    width: $radius;
    height: calc(#{$radius} / 2);
    background-color: transparent;
    border-top-left-radius: calc(#{$radius} / 2);
    border-top-right-radius: calc(#{$radius} / 2);
    border: $thickness solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.circle::after {
  content: '';
  display: inline-block;
  width: $radius;
  height: calc(#{$radius} / 2);
  background-color: transparent;
  border-bottom-left-radius: calc(#{$radius} / 2);
  border-bottom-right-radius: calc(#{$radius} / 2);
  border: $thickness solid gray;
  border-top: 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
```
Vadim Katsemba 2月前 0 只看Ta

引用 7楼
这是一个相对简单的例子并且对我来说很有用。
```
hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
```
资源： https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html

bzlm 2月前 0 只看Ta

8楼

我们可以用 radial-gradient 和 mask 。使用单个 div，无需伪元素。

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  /* this is flexible. you can change */
  --circle-radius: 100px;
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}

<div class="a"></div>

圆半径也可以是百分比值：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 30px;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  --circle-radius: 20%; /* changed as percent value */
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: rgba(0, 0, 0, .8);
}

<div class="a"></div>

另一个想法：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  --circle-radius: 100px;
  --border-width: 30px;
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) calc(var(--circle-radius) + 2px + var(--border-width)), transparent calc(var(--circle-radius) + 2px + var(--border-width) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}

<div class="a"></div>

撤销：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  --circle-radius: 100px;
  --border-width: 30px;
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, #000 var(--circle-radius), transparent calc(var(--circle-radius) + 2px) calc(var(--circle-radius) + 2px + var(--border-width)), #000 calc(var(--circle-radius) + 2px + var(--border-width) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}

<div class="a"></div>

Deelliiee 2月前 0 只看Ta

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

<div>Hello</div> <hr/> <div>World</div>
强调文字
Anton Samokat 2月前 0 只看Ta

引用 10楼
关于“Pius Nyakoojo”的“方法 1”，稍加改进（见下文）即可奏效。我个人认为这是最简单的解决方案：
```
<html>

<style>
.mask {
    position: absolute;
    top: -50px;                     /* minus half the div size */
    left: -50px;                    /* minus half the div size */
    width: 100px;                   /* the div size */
    height: 100px;                  /* the div size */
    background-color: transparent;
    border-radius: 100px;           /* the div size */
    border: 50px solid white;       /* half the div size */
    pointer-events: none;           /* send mouse events beneath this layer */
}

.stuff {
    position: absolute;
    width: 100px;                   /* the div size */
    height: 100px;                  /* the div size */
    overflow: hidden;               /* hide the excess of the mask border */
    background-color: #CCC;
}
</style>
<body>
    <div class="stuff">
        <div class="mask"></div>
        blah blah blah blah blah
        blah blah blah blah blah
        blah blah blah blah blah
    </div>
</body>
</html>
```
Mathias Inguanez 2月前 0 只看Ta

引用 11楼
我的简单解决方案是使用 css 为 hr 设置样式，使其具有零顶部和底部边距、零边框、1 像素高度和对比背景颜色。这可以通过直接设置样式或定义类来实现，例如：
```
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
```
Anoop LL 2月前 0 只看Ta

引用 12楼

对于像我一样为此苦苦挣扎的人来说 - div：after 需要 box-sizing：content-box; 有时会被 css 框架设置为 border-box。
Matt Yoon 2月前 0 只看Ta

引用 13楼
我想要一条长虚线，所以我用了这个。
.dash{ border: 1px solid red; width: 120px; height: 0px; }

<div class="dash"></div>

Alberto 2月前 0 只看Ta

14楼

参照 web-tiki 的回答，我想补充一点，您可以随时使用将 div 置于中央 translate(-50%,-50%) ，因此使用 -property 没有问题 border ，它具有更好的浏览器支持。

div{
    position:relative;
    width:500px; 
    height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius:50%;
    width:150px; height:150px;
    border: 1000px solid rebeccapurple;
}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<div></div>

你可以通过这种技术真正发挥创造力：

document.addEventListener( "DOMContentLoaded", function(){ 
	setInterval(function(){
		if(document.getElementById("moving").style.height === "500px"){
			document.getElementById("moving").style.height = "0px";
		} else {		
			document.getElementById("moving").style.height = "500px";
		}
	}, 2000);
});

#container {
	width: 500px;
	margin: 0 auto;
	border: 1px solid black;
	overflow:hidden;
	position: relative;
}


#circle{
    position:relative;
    height:150px;
    margin:0 auto;
	clear:left;
	overflow:hidden;
}
#circle::before, #circle::after {
    content:'';
    border-radius:50%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#circle::before {
    height: 140px;
    width: 140px;
    background: rebeccapurple;
}
#circle::after{
    width:150px; 
	height:150px;
    border: 2000px solid rebeccapurple;
}

#line {
	margin: 0 auto;
	width: 6px;
	height: 200px;
	position: relative;
}
#line::before, #line::after {
	content: " ";
	background-color: rebeccapurple;
    height: 200px;
	width:2000px;
	position:absolute;
}
#line::before {
	right: 100%;
}
#line::after { 
	left: 100%;
}

#moving {
	height: 0px;
    width: 100%;
    background: blue;
    transition: 2s height;
    position: absolute;
    top: 0px;
    z-index: -1;
}
body{
	background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;
}

<div id="container">
	<div id="circle"></div>
	<div id="line"></div> 
    <div id="circle"></div>
    <div id="moving"></div>
</div>

Itz_Prem_Singh 2月前 0 只看Ta

引用 15楼
如果您确实想要 主题休息 ，请务必使用标签 <hr> 。

如果你只是想要一条设计线，你可以使用类似 css 类的东西
```
.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}
```
并像使用它一样
```
<div class="block_1 hline-bottom">Cheese</div>
```
Benilson 2月前 0 只看Ta

引用 16楼

@IonuțG.Stan，谢谢您的回答。但是它可以与图像结合吗？所以它会被图像遮盖而不是黑色吗？
Victoria 2月前 0 只看Ta

引用 17楼

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

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

因此，在定义之后，我更喜欢 <hr>
XAMlMAX 2月前 0 只看Ta

引用 18楼

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

引用 19楼
.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>
BlessedHIT 2月前 0 只看Ta

引用 20楼

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