css 使用background背景实现border边框效果

有一个段落P元素，我们需要给这个段落的每一行添加border-top效果，下面来看一下如何使用background背景实现border边框效果，实例代码如下所示：

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
p {
  font-weight: 200;
  font-size: 1.7em;
  line-height: 1.7em;
  background: -webkit-linear-gradient(-90deg, #000 1px, rgba(0, 0, 0, 0)
    1px, rgba(0, 0, 0, 0) 100%);
  background: -moz-linear-gradient(-90deg, #000 1px, rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(180deg, #000 1px, rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 100%);
  background-size: 100% 1.7em;
}
</style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
    et ea rebum.</p>
</body>
</html>

在线运行