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

在线运行

原文地址：http://www.manongjc.com/article/1276.html

其他阅读：

  • csss3径向渐变radial-gradient实现带圆点的背景
  • css3源码之实现条纹背景(纯css)
  • css 实现background背景颜色随着屏幕的宽度变化而变化
  • css实现DIV扩展伸缩效果
  • 纯css制作的一个可折叠的(accordion )菜单

    • css 使用background背景实现border边框效果的更多相关文章

    1. css中background背景属性概

      css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

    2. 【Python全栈-CSS】background背景

      background背景 一.背景图片 background-image: url("img/num.png"); background-position-x: -200px ; ...

    3. CSS之background——背景与渐变练习题

      1.单选题 将背景的绘制区域规定到内容框,应使用background-clip属性中的哪个属性值? A content-box B border-box C padding-box D none-bo ...

    4. css中background背景属性概述

      background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

    5. CSS属性定义 文本修饰 边框效果 背景修饰

      一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

    6. CSS边框效果

      前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...

    7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

      前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

    8. css中的背景、边框、补丁相关属性

      css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

    9. CSS鼠标悬停图片加边框效果,不位移的方法

      <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

    随机推荐

    1. ApiCloud重新定义移动应用开发

      http://www.apicloud.com/ 为APP开发者提供云端的API服务和数据存储服务,动态生成RESTful API,支持在线NoSQL数据表设计.API调试及用量分析:同时提供推送.云 ...

    2. ASP.NET Eval四种绑定方式

      1.1.x中的数据绑定语法 <asp:Literal id="litEval2" runat="server" Text='<%#DataBinde ...

    3. JavaScript中回调函数的使用

      在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数. ...

    4. JavaScript-日期格式化（一）

      /** * 日期格式化, * @param date 要格式化的日期 * @param pattern 进行格式化的模式 * 支持的模式字母有: * y:年, * M:年中的月份(1-12), * d ...

    5. struts 2 <s:select> 标签

      名称 必填 缺省值 类型 描述 emptyOption false false Boolean 是否在题头选项后面添加一个空的(--)选项 headerKey false   Object/Strin ...

    6. 黄聪：simple_html_dom 换行符丢失

      我在利用simple_html_dom来解析文档是,想要将其中的换行符替换成<BR> , 结果试了好几次没有成功,但是在原始文档中确实是有换行符的.后来索性把装载进来的文档打印出来,结果发 ...

    7. @synthesize obj = _obj 理解

      在很多代码里可以看到类似得用法: @interface MyClass:NSObject{ MyObjecct *_object; } @property(nonamtic, retain) MyOb ...

    8. 关于List泛型的强制转换

      当我们从数据库中查询出一些数据,有时返回的结果可能是List<Object>类型,而我们清楚的知道它的准确类型是List<User>,可能我们想直接的去进行类型的转换,你可能会 ...

    9. Codeforces Round #358 (Div. 2)B. Alyona and Mex

      B. Alyona and Mex time limit per test 1 second memory limit per test 256 megabytes input standard in ...

    10. 关于 Code First

      第一感觉还是很新鲜的,你可以自由的控制数据结构. 比如,你想象oracle那样,给每个表增加4个字段,创建人,创建时间,更新人,更新时间.完全可以创建一个父类包含着四个属性(甚至可以把四个属性作为一个 ...