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实现鼠标悬停时图片加边框效 ...
随机推荐
- 文件/目录部分处理工具类 DealDir.java
package com.util; import java.io.File; import java.util.StringTokenizer; /** * 文件/目录 部分处理 * @createT ...
- Android之Button自定义点击效果
我们在界面上经常会用到button按钮,但通常button点击后看不到点击的效果,如果用户连续点击了两次,就会报NAR错误,这样交互性就比较差了.如果我们自定义了button点击效果,比如我们点击了b ...
- [转]谈谈select, iocp, epoll,kqueue及各种网络I/O复用机制
参考原文:再谈select, iocp, epoll,kqueue及各种I/O复用机制 一.I/O模型概述 介绍几种常见的I/O模型及其区别,如下: blocking I/O nonblocking ...
- 【linux】chmod命令详细用法
功能说明: 变更文件或目录的权限 u:User,即文件或目录的拥有者. g:Group,即文件或目录的所属群组. o:Other,除了文件或目录拥有者或所属群组之外,其他用户皆属于这个范围. a:Al ...
- C# .NET MVC 接收 JSON ,POST，WCF 无缝隙切换
用来与HTTP 模式的WCF 无缝隙切换. 服务端是MVC. 在Home/About 上面加 [HttpPost].读取Request.InputStream 中所有内容.然后返回JSON给客户端:r ...
- 【转】libvirt kvm 虚拟机上网 – Bridge桥接
libvirt kvm 虚拟机上网 – Bridge桥接 2013 年 7 月 3 日 / 东东东 / 暂无评论 目录 [hide] 1 Bridge桥接原理 2 在host机器配置桥接网络 2.1 ...
- 跟我一起写Makefile--- 变量（嵌套变量+追加变量+overrid+多行变量+环境变量+目标变量+模式变量）
目录(?)[-] 使用变量 一变量的基础 二变量中的变量 三变量高级用法 四追加变量值 五override 指示符 六多行变量 七环境变量 八目标变量 九模式变量 使用变量 ———— 在Makefil ...
- linux svn迁移备份的三种方法
原文:http://www.iitshare.com/linux-svn-migration.html svn备份方式对比分析 一般采用三种方式: 1.svnadmin dump 2.svnadmin ...
- jetty-run运行报错的原因
- Sublime Text 3关闭自动更新
Sublime Text 3关闭自动更新 第一步:help->enter license 这有两个: -– BEGIN LICENSE -– Michael Barnes Single User ...