css中怎么弄一条水平线

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中,我们可以通过多种方式实现一条水平线的效果。下面介绍两种常见的方法。/* 方法一:使用border属性 */ hr { border: none; border-top: 1px solid

CSS中,我们可以通过多种方式实现一条水平线的效果。下面介绍两种常见的方法。

/* 方法一:使用border属性 */
hr {
  border: none;
  border-top: 1px solid #ccc;
}

/* 方法二:使用伪元素 */
hr::before {
  content: "";
  display: block;
  height: 1px;
  background-color: #ccc;
} 

上述代码中,第一种方法使用了border属性,通过设置border-top来实现上边框的效果,并将border设置为none去掉其他边框的影响。

第二种方法使用了伪元素before,通过content来插入一个空白元素,display:block将其转换为块级元素,height设置高度为1px,background-color设置背景颜色为灰色,从而实现水平线的效果。

需要注意的是,两种方法都需要在文档的合适位置插入hr元素,否则将无法看到水平线的效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么弄一条水平线

粉丝

0

关注

0

收藏

0

已有0次打赏