css 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>