css 使用background背景实现border边框效果
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
其他阅读：
css 使用background背景实现border边框效果的更多相关文章
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- 【Python全栈-CSS】background背景
background背景 一.背景图片 background-image: url("img/num.png"); background-position-x: -200px ; ...
- CSS之background——背景与渐变练习题
1.单选题 将背景的绘制区域规定到内容框,应使用background-clip属性中的哪个属性值? A content-box B border-box C padding-box D none-bo ...
- css中background背景属性概述
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...
- CSS属性定义 文本修饰 边框效果 背景修饰
一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...
- CSS边框效果
前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- CSS鼠标悬停图片加边框效果,不位移的方法
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...
随机推荐
- SQL SERVER 生成MYSQL建表脚本
/****** Object: StoredProcedure [dbo].[GET_TableScript_MYSQL] Script Date: 06/15/2012 13:05:14 ***** ...
- MySQL在一台db服务器上面如何启动多个实例 (转)
安装过程省略过,源码安装请参考http://write.blog.csdn.net/postlist/1609043/all 整理自己的文档,发现以前做的例子,share下,欢迎大家提出改进意见. 一 ...
- BI案例：KPI在商业智能中的应用（ZT）
KPI(Key Performance Indication)即关键业绩指标,是通过对组织内部某一流程的输入端.输出端的关键参数进行设置.取样.计算.分析,衡量流程绩效的一种目标式量化管理指标,是把企 ...
- OC-设计模式KVC+KVO定义及使用
一.KVC Key-Value-Coding 键值编码(KVC:是一种存取值的方式,通过key存value 或者通过key获取value key从哪里来的呢? key 把对象里面的属性名.变量名当作了 ...
- 2. scala中的数组
一. 数组声明 定长数组 scala> new Array[String](5) res1: Array[String] = Array(null, null, null, null, null ...
- 避免HTML5六种错误用法
一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>--具体地说,就是直接用作替代品(用于样 ...
- IGS_学习笔记06_IREP发布客户化集成接口为Web Service（案例）
2015-01-03 Created By BaoXinjian
- EXISTS、EXCEPT、INTERSECT 运算符
转:http://www.cnblogs.com/WizardWu/archive/2011/10/01/2197147.html EXISTS运算符 EXISTS 可称之为运算符,有些书称它为关键词 ...
- cvc-elt.1: 找不到元素 'beans' 的声明
这次遇到的这个错误又坑爹又低级 , 是因为网上抄到了错误的xsd搞的. 这是网上抄到的 xsi:schemalocation=" http://www.springframework.org ...
- 在eclipse中下载包含子模块(Submodules)的git项目
先将项目下载下来 , 这时由于是子项目的原因 , 下载的项目中不包含任何子项目 . 这时在eclipse的Git Repositories中 , 选中Submodules , 右键点击update即可 ...