8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 使用 HTML 和 CSS 创建水平线的正确方法是什么？

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

scibuff 2月前
125 0

我需要在某个块后画一条水平线，有三种方法可以做到：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） X
正在加载信息~
最新回复 (0)
  • 引用 10楼

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

    enter image description here

    它的代码如下： 

    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>
返回
作者最近主题：