使用css2.1实现多重背景、多重边框效果[译]（4）
作者：小志 来源：小志博客 发布时间：2010-08-23 16:32:00
示例代码：多边框
多边框的处理方式有很多相类似之处。利用这些方式可以避免使用图片而产生简单的效果。
元素必须具有相对定位属性，并且在需要有填充产生足够的宽度给由伪元素创建的额外的边框。
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
将伪元素绝对定位在盒子中，并明确与元素盒模型边距之间的距离，设置z-index值为负值后移动到内容层的后面，同时设置你所需要的边框色和背景色。
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}
就是这么简单。一个使用CSS2.1的多边框效果成品就有了。
渐进增强和传统浏览器
IE6和IE7不支持CSS2.1伪元素，将会忽略所有:before和:after声明。它们没有任何增强，但保留着基本的使用习惯。
关于Firefox 3.0的一个警告
Firefox 3.0虽然支持CSS2.1伪元素但不支持其定位。虽然没有支持这部分的效果，但另一些完全不受影响，并且不知道后续的Firefox 3.0版本将会什么时候优化成完美支持这种技术。有时，可以通过定义display:block样式属性可以改进伪元素的外观样式。
使用目前的方式，要求其定位伪元素，建议考虑Firefox 3.0支持的重要性和您的用户目前使用的浏览器比例。
0
投稿猜你喜欢
- 目录Django 和 MongoDB 设置安装：创建：激活：使用 PyMongo 连接 Django 和 MongoDB使用 MongoEn
- map是key-value数据结构，又称为字段或者关联数组。类似其他编程语言的集合一、基本语法var 变量名 map[keyty
- 大家都知道对于一个页面来说，最基本的结构呢就是<html> <head> <!-- 头部信息内容区域
项目开发中，代码管理肯定离不开git操作，Pycharm中没有复杂的命令操作，只需要进行一些简单的菜单操作就可以方便的实现版本管理，下面分别- 1. 打开FrontPage 2003，点击“文件→新建→新建网站→其他网站模板”，然后选择“数据库界面向导”，给定网站路径后，单击[确定]
- 在使用selenium去获取淘宝商品信息时会遇到登录界面这个登录界面处理的难度在于滑动验证的实现，有的人使用微博登录，避免了滑动验证，那可不
- 一、前言现在到了，第二步，上一步我们已经做好了发牌模块，有了手牌，就需要判断牌型了，平时打扑克时，我们需要使用大脑进行判断自己手里的牌属于那
- Flask框架介绍Flask诞生于2010年，是Armin ronacher用Python语言基于Werkzeug工具箱编写的轻量级Web开
- 参数strSQL 要导出的SQL查询语句strFields 字段名称列表,如果为空字符,则使用SQL语句中的字段名用法示例:1:export
- 1 获取轮廓OpenCV2获取轮廓主要是用cv2.findContoursimport numpy as npimport cv2im =
- 1、django应用Celerydjango框架请求/响应的过程是同步的，框架本身无法实现异步响应。但是我们在项目过程中会经常会遇到一些耗时
- asp如何用Jmail的发送电子邮件？asp源码见下：<％ Set mail1
- Vision Transformer（VIT）Vision Transformer（ViT）是一种新兴的图像分类模型，它使用了类似于自然语言
- asp中fso怎样判断一个盘上是否有文件，实例代码，需要的朋友可以试试：<％ dim objfolder dim
- 第一步——安装MySQL 到http://dev.mysql.com/downloads/ 下载这个服务器、MySQL GUI工具和MySQ
- 逻辑比较简单 ，直接上代码 定时发送直接使用了win服务器的定时任务来定时执行脚本#coding:utf-8from __futu
- I. 前言在上一篇文章深入理解PyTorch中LSTM的输入和输出（从input输入到Linear输出）中，我详细地解释了如何利用PyTor
- 代码如下：<html> <head> &nb
- 前言以前写过 vue项目中封装echarts的比较优雅的方式，大屏可视化里面，除了数据图表很常用，显示省市地图区域也是很常用到的，这是姐妹篇
- 下面两个函数实现了对字符串中数字的判断。function isnaw(str) f
