如何在HTML中画一条线_随笔

在html中花一条线的方法是有很多的，一般可以直接使用html代码实现或者借助css代码来实现都是可以的。

方法1、使用<hr>标签画线

<html>

<body>

<p>hr 标签定义水平线：</p>

<hr />

<hr />

<hr />

</body>

</html>

结果如下：

方法2：使用css的border进行画线

<!DOCTYPE html>

<html>

<head>

<title>float</title>

</head>

<style>

#div1{

width: 500px

border-bottom: 1px solid red

}

</style>

</html>

结果如下：

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：

div {background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,

radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x

background-size: 20px 20pxbackground-position: -10px calc(100% + 16px), 0 calc(100% - 4px)}

3、浏览器运行index.html页面，此时在文字下方成功添加了波浪线。

欢迎分享，转载请注明来源：内存溢出

如何在HTML中画一条线