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. java通过ftp和sftp上传war包上传到Linux服务器实现自动重启tomcat的脚本代码

      ar包自动上传Linux并且自动重启tomcat 用的是jdk1.7出的文件监控 支持ftp和sftp,支持多服务器负载等 配置好config 非maven项目导入直接使用 #\u76D1\u542C ...

    2. MySQL explain key_len 大小的计算

      总结: 变长字段需要额外的2个字节,固定长度字段不需要额外的字节.而null都需要1个字节的额外空间,所以以前有个说法:索引字段最好不要为NULL,因为NULL让统计更加复杂,并且需要额外一个字节的存 ...

    3. ABP系列文章总目录：

      转自:http://www.cnblogs.com/mienreal/p/4528470.html 1.ABP总体介绍 2.ASP.NET Boilerplate入门 3.ABP分层架构 4.ABP模 ...

    4. Ajax请求在IE和Google Chrome中可以响应，在Firefox中无法响应

      在工作中碰到这么一个问题,发送ajax请求,在IE和chrome中可以正常的响应,但是在Firefox中无法响应,代码如下: JS代码: function Sure(obj) { var statu ...

    5. EL表达式-例子

      <%@page import="java.util.*"%> <%@page import="java.util.ArrayList"%> ...

    6. UI-程序的运行顺序

      在AppDelegate.m里面的每个方法里都输入(包括main文件里也输入) NSLog(@"%s %d”,__func__,__LINE__); __func__ :代表使用的方法 __ ...

    7. android学习笔记47——读写SD卡上的文件

      读写SD卡上的文件 通过Context的openFileInput.openFileOutput来打开文件输入流.输出流时,程序打开的都是应用程序的数据文件夹里的文件,其存储的文件大小可能都比较有限- ...

    8. MSSQL 随机查询且降序排列

      --随机查询且降序排列 * FROM dbo.COMPANY_USER_INFO ORDER BY NEWID()) AS T ORDER BY T.cu_id DESC

    9. ASP.NET网页验证码常用方法

      验证码生产类 using System; using System.Data; using System.Configuration; using System.Web; using System.W ...

    10. oracle中一个字符串包含另一个字符串中的所有字符

      oracle中一个字符串包含另一个字符串中的所有字符 --解决监理报告中所勾选的标段信息,与该用户所管理的标段字符串不匹配的问题. select * from a where instr(a,b)&g ...