css 使用background背景实现border边框效果
来源:互联网 发布:mac os x 安装软件 编辑:程序博客网 时间:2024/05/21 04:19
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的朋友可以参考一下。
有一个段落P元素,我们需要给这个段落的每一行添加border-top效果,下面来看一下如何使用background背景实现border边框效果,实例代码如下所示:
csss3径向渐变radial-gradient实现带圆点的背景 css3源码之实现条纹背景(纯css) css 实现background背景颜色随着屏幕的宽度变化而变化 css实现DIV扩展伸缩效果 纯css制作的一个可折叠的(accordion )菜单
有一个段落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
其他阅读:
0 0
- css 使用background背景实现border边框效果
- silverlight border 边框和背景渐变效果
- CSS实现表格边框阴影和背景渐变效果
- CSS实现表格边框阴影和背景渐变效果
- CSS背景background使用攻略
- 【CSS学习】CSS背景background、background-position使用详解
- css中background:-webkit-gradient实现背景渐变效果,并且兼容各个浏览器
- CSS border 边框
- CSS设置border边框
- 10015---CSS Border(边框)
- css中的边框border
- CSS-Border(边框)
- css边框border样式
- css之border边框
- 理解CSS边框border
- CSS Border(边框)
- 理解CSS边框border
- css边框border
- HDU 4609 3-idiots(FFT优化 + 计数方法)——2013 Multi-University Training Contest 1
- HDU 4609 3-idiots(FFT优化 + 计数方法)——2013 Multi-University Training Contest 1
- xshell终端传输文件
- JAVA学习日记08
- centos7防火墙开放80端口
- css 使用background背景实现border边框效果
- 顶级的JavaScript框架、库、工具及其使用
- FreeBook 基于 MVP 模式开发的带缓存网络爬虫,采用最流行框架搭建,干货多多
- Altium Designer Bottom Solder层的作用
- 微信公众号开发Apache+php如何搭建服务
- werewolf (桌游)
- facebook presto源码解读(part1)
- UESTC 250 数位DP
- oracle11g安装教程(注意事项及图文教程)