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. oracle自动备份

      因为一个项目上马,需要设置自动备份,网上搜索了一下,windows平台下基本上是通过系统的任务计划完成的,于是我也写了一下,无非就是exp xxxx.dmp,文件名是用的日期加时间,精确到秒,一小时备 ...

    2. Hibernate3回顾-3-Session管理

      3.Session管理 仅为个人理解.请指正 3.1背景 由于Configuration的创建耗费系统的资源.所以有必要只将Configuration实例化一次,之后通过SessionFactory获 ...

    3. android学习笔记七——控件(DatePicker、TimePicker、ProgressBar)

      DatePicker.TimePicker ==> DatePicker,用于选择日期 TimePicker,用于选择时间 两者均派生与FrameLayout,两者在FrameLayout的基础 ...

    4. SQL语句技巧_索引的优化_慢查询日志开启_root密码的破解

      1.正则表达式的使用 regexp例:select name,email from t where email regexp '@163[.,]com$'使用like方式查询selct name,em ...

    5. title与h1标签的区别和联系

      很多新站长在网站SEO过程中,会认为把H1等同于Title. 其实两是有区别和联系的,两者不能划等号.下面主要从文章和页面角度分析title和H1. H1等同于title吗? H1不等于title.H ...

    6. 黄聪：wordpress如何使用wp_rewrite实现自定义伪静态，非301重定向。

      今天,想通过wordpress实现 http://hcsem.com/a?h-1 伪静态为 http://hcsem.com/a-1.html 找了很多资料,终于搞定. 只需要在functions.p ...

    7. (C#) System.BadImageFormatException: An attempt was made to load a program with an incorrect format.

      ASP.NET: System.BadImageFormatException: An attempt was made to load a program with an incorrect for ...

    8. Qt属性表控件的使用 QtTreePropertyBrowser

      属性表是vs2003时引入的的新控件,用于流量和设置大量的信息,现在,很多软件上都能看到它的身影,如vs,Qt Creator等IDE的详细设置里都离不开属性表. 下图是Qt Creator里的属性表 ...

    9. 转-Android联网 — HttpURLConnection和HttpClient选择哪个好？

      http://www.ituring.com.cn/article/199619?utm_source=tuicool 在Android开发中,访问网络我们是选择HttpURLConnection还是 ...

    10. 图片_ _Android--加载大分辨率图片到内存

      http://www.cnblogs.com/plokmju/p/android_LoadBigImage.html#3084005 前言 在使用ImageView显示图片的时候,直接加载一个图片资源 ...