html背景图片带边框,css 使用background背景实现border边框效果

css中，我们一般使用border给html元素设置边框，但也可以使用background背景来模拟css边框效果，本文章向大家介绍css

使用background背景实现border边框效果，需要的朋友可以参考一下。

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

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;

}

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.