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. maven 常见错误解决

      1. maven打包编译时后台一直输出警告信息 [WARNING] File encoding has not been set, using platform encoding GBK, i.e. ...

    2. shell随机写入指定文件

      具体思路如下,求代码 shell随机读取file.txt文本,file.txt文本有许多行文字 想用shell随机读取file.txt的任意一行文字并且写入到file.php第四行文件. sed -i ...

    3. DIV的垂直居中

      一直以来都没有找到一种完美解决DIV垂直居中的方法,今天终于找到了,特记录如下,从此不再用table来居中了.^^ <html> <style> #image{ width:5 ...

    4. 【phantomjs】使用phantomjs生成highChart的图片（待完善）

      阅读目录 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan' ...

    5. C#语法杂谈

      1. 值类型和引用类型 1.1 值类型 比如int,float,struct等,和C/C++中的变量差不多,但编译器会强制你必须先初始化再使用,避免一不小心使用了未初始化的变量. 1.2 引用类型 c ...

    6. Env:ctags和Taglist安装与配置

      注:文章参照http://blog.csdn.net/vaqeteart/article/details/4146618 想必用过Source Insight的人都记得这样一个功能: SI能够把当前文 ...

    7. 127 Word Ladder

      Given two words (beginWord and endWord), and a dictionary's word list, find the length of shortest t ...

    8. SecureCRT自动登录

    9. Spark1.6 DataSets简介

      Apache Spark提供了强大的API,以便使开发者为使用复杂的分析成为了可能.通过引入SparkSQL,让开发者可以使用这些高级API接口来从事结构化数据的工作(例如数据库表,JSON文件),并 ...

    10. Scala控制抽象

      private def filesHere = (new java.io.File(".")).listFiles() def filesEnding(query: String) ...