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. Python基础(三)——集合、有序 无序列表、函数、文件操作

      1.Set集合 class set(object): """ set() -> new empty set object set(iterable) -> n ...

    2. 【1-4】jQuery代码风格-导航栏

      实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

    3. 把docker当做绿色打包工具

      如题,我只是把docker当成绿色版的各种环境的集成打包工具了 用到了docker的--net=host模式,这个暂时在mac下是有问题的,linux下正常使用,具体docker的网络模式参考这里,此 ...

    4. Spark工程开发常用函数与方法(Scala语言)

      import org.apache.spark.{SparkContext, SparkConf}import org.apache.spark.sql.{SaveMode, DataFrame}im ...

    5. PLSQL_性能优化系列17_Oracle Merge Into和Update更新效率

      2015-05-21 Created By BaoXinjian 一.摘要 以前只考虑 merge into 只是在特定场合下方便才使用的,今天才发现,merge into 竟然会比 update 在 ...

    6. [实变函数]2.3 开集 (open set), 闭集 (closed set), 完备集 (complete set)

      1        $$\beex \bea E\mbox{ 是开集}&\lra E^o=E\\        &\lra \forall\ P_0\in E,\ \exists\ U( ...

    7. hadoop对于压缩文件的支持及算法优缺点

      hadoop对于压缩文件的支持及算法优缺点   hadoop对于压缩格式的是透明识别,我们的MapReduce任务的执行是透明的,hadoop能够自动为我们 将压缩的文件解压,而不用我们去关心. 如果 ...

    8. vs2015-Azure Mobile Service

      /App_Data /App_Start/ WebApiConfig.cs using System; using System.Collections.Generic; using System.C ...

    9. http示例代码

      //下载文件 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletEx ...

    10. 要件审判九步法及其基本价值 z

      要件审判九步法及其基本价值 发布时间:2014-12-24 14:29:05 作者介绍 邹碧华,男,1967年出生于江西奉新,毕业于北京大学法学院,获法学博士学位.上海市高级人民法院副院长.2006年 ...