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实现鼠标悬停时图片加边框效 ...
随机推荐
- oracle11g导入dmp文件（根据用户）
已知:用户名.密码.dmp文件 .(指即将导入dmp文件的用户名和密码) 需求:将该dmp文件导入本地oracle11g中. 步骤: 1.将该dmp文件拷贝到G:\oracle11g\admin\or ...
- Cordova调用Activity
首先需要编写一个CallActivityPlugin插件,专门调用Activity package com.example.plugin; import org.apache.cordova.api. ...
- [原]总结VIM的实用技巧
VIM真是一个神奇而又复杂的编辑器,让我这样的Linux编程新手茫然不已啊.每次到真正动手编程的时候才发现完全不知道该怎么操作VIM,一点都没感觉到VIM的强大,哈哈--正好今天学习了一点VIM操作技 ...
- input绑定datapicker控件后input再绑定blur或者mouseout等问题
input绑定datapicker控件后input再绑定blur或者mouseout等问题 问题描述:今天在修改一个东西的时候需要给一个input输入域绑定blur事件,从而当它失去焦点后动态修改其中 ...
- Python(迭代器 生成器 装饰器 递归 斐波那契数列)
1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优 ...
- angularjs webstorm 单元测试 Package.json
Package.json小结 生成package.json 定位到想放置package.json的目录,运行npm init,根据提示就可以生成package.json文件,其中test comman ...
- Python 派生类子类继承类
1.创建list类的子类Namedlist,初始化新类,创建新对象实例johnny,检查对象类型,并使用list的一些功能来存储数据 >>> class Namedlist(list ...
- android studio使用发布者证书调试
某些时候还是要用到的,直接说步骤,修改app.gradle apply plugin: 'com.android.application' android { .................... ...
- 【freemaker】之循环,判断,对象取值
entity: public class Employee { private Integer id; private String name; private Integer age; privat ...
- ulipad 常用快捷键
快捷键名称 对应功能 F1 (M)UliPad Help Document(帮助文档) F2 (M)Directory Browser(目录浏览)(3.1版新增) F3 (M)Find Next(查找 ...