在HTML5中，我们可以使用<hr>标签来创建水平线，但默认情况下，水平线可能会带有阴影或其他样式。如果你想要创建一个无阴影的水平线，可以通过以下几种方法来实现：

方法一：使用CSS样式

通过CSS样式，我们可以轻松地移除水平线的阴影。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无阴影水平线</title>
<style>
    .no-shadow-hr {
        border: 0;
        height: 1px;
        background: #333;
        margin: 20px 0;
    }
</style>
</head>
<body>

<hr class="no-shadow-hr">

</body>
</html>

在这个例子中，我们定义了一个类.no-shadow-hr，该类通过设置border为0和background为单一颜色来创建一个水平线，同时通过height属性设置线的高度。

方法二：使用CSS伪元素

另一种方法是使用CSS伪元素::before和::after来创建一个无阴影的水平线。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无阴影水平线</title>
<style>
    .pseudo-hr {
        position: relative;
        height: 1px;
        background: #333;
        margin: 20px 0;
    }
    .pseudo-hr::before, .pseudo-hr::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background: #333;
        top: 50%;
        transform: translateY(-50%);
    }
    .pseudo-hr::before {
        left: -50%;
    }
    .pseudo-hr::after {
        right: -50%;
    }
</style>
</head>
<body>

<div class="pseudo-hr"></div>

</body>
</html>

在这个例子中，我们使用伪元素来创建两个覆盖在原始水平线上的元素，这样原始的水平线就不再可见，从而达到无阴影的效果。

方法三：使用SVG

SVG（可缩放矢量图形）是一个用于创建矢量图形的XML标记语言，它也可以用来创建无阴影的水平线。以下是一个简单的SVG水平线示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG无阴影水平线</title>
</head>
<body>

<svg width="100%" height="1px">
    <line x1="0" y1="0" x2="100%" y2="0" stroke="#333" stroke-width="1"/>
</svg>

</body>
</html>

在这个例子中，我们使用SVG的<line>元素来创建一个水平线，通过设置stroke属性来定义线的颜色，stroke-width属性来定义线的宽度。

总结

以上三种方法都可以用来创建无阴影的水平线。选择哪种方法取决于你的具体需求和偏好。CSS样式方法简单直接，伪元素方法可以提供更多的设计灵活性，而SVG方法则适用于需要高度定制的情况。