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实现鼠标悬停时图片加边框效 ...
随机推荐
- 封装类的方式访问数据库(封装字符串、json)
<?php class DBDA { public $host="localhost";//服务器地址 public $uid="root";//用户名 ...
- Android开发——通过扫描二维码，打开或者下载Android应用
Android开发——通过扫描二维码,打开或者下载Android应用 在实现这个功能的时候,被不同的浏览器折磨的胃疼,最后实现了勉强能用,也查考了一下其他人的博客 android实现通过浏览器点击 ...
- 【Spring-AOP-1】AOP相关概念
Advice (好多中文书籍翻译为:增强处理,比如前向增强.后向增强等) 描述了Aspect类执行的具体动作.the job of an aspect. 定义了如下两个方面: what:即Aspect ...
- Puppet master/agent installation on RHEL7
==================================================================================================== ...
- HDMI接口与协议
深入了解HDMI接口 一.HDMI接口的工作原理这张图是HDMI接口的架构示意图.从左边的信号源中你可以看到,HDMI接口的信源可以是任何支持HDMI输出的设备,而接入端也可以是任何带有HDMI输 入 ...
- 在Huawei USG2100 上配置通过Huawei VPN客户端的接入
USG2100 设置 一.本地策略 中允许 Untrust 对 L2TP 的访问: 二.勾选 VPN-->L2TP 启用: 三.设置参数: 1.组类型选择LNS,本端隧道名称LNS,对端隧道名称 ...
- JavaScript的jsonp
目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...
- PLSQL_性能优化系列12_Oracle Index Anaylsis索引分析
2014-10-04 Created By BaoXinjian
- [物理学与PDEs]书中出现的向量公式汇总
P 11 1. $\rot (\phi{\bf A})=\n \phi\times{\bf A}+\phi\ \rot{\bf A}$. 2. $-\lap {\bf A}=\rot\rot {\bf ...
- 使用Git命令从Github下载代码仓库
Github作为最大的开源代码仓库,也是作为版本控制工具,简直就是程序员的天堂,是一座挖掘不尽的宝藏.现在讲解一下如何把一个Github上的项目下载到本地,也就是在本地也建立一个项目仓库,以后进行项目 ...