使用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支持的重要性和您的用户目前使用的浏览器比例。
猜你喜欢
- 汉字转为拼音的asp函数,原理:利用多维数组 1.添加索引 2.遍历数组Author: Unknowasp之家测试截图,呵呵不错:<%
- 近日,被同事问及一个产品列表的做法怎么实现?一个产品列表,每个产品列表后面跟一个button,这些button居右对齐。其实这个效果跟新闻列
- CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css ha
- 现在公布方法:替换editor.js 函数 // Toolbar button onmouseup
- 良好的编程习惯是每个程序员都应该具备的工作素质,在我的软件生涯中屡屡发现一些程序员的身上总有这样或者那样的坏毛病。这些毛病在一些从业时间不是
- 我把数据库操作类整理了一下,它包含了常用的数据库操作,由三种方式:简单的SQL拼接字符串的形式,SQL语句使用参数的形式和存储过程的形式,每
- 此处收集的是一些夺人心魄的创意广告牌,巧妙的构思十分值得大家观瞻.......超人归来 superman returnsNespressos
- Oracle是目前应用最广泛的数据库系统。一个完整的数据库系统包括系统硬件、操作系统、网络层、DBMS(数据库管理系统)、应用程序与数据,各
- 主要讲 except 和 not in 的性能上的区别。 代码如下:CREATE TABLE tb1(ID int) CREAT
- asp之家注:对于ACCESS数据库中的NULL,经常我们直接判断该字段是否为空用的是:name="",但是这个还不够,
- 在当今企业环境中,保证数据安全不是可有可无的工作。频繁曝光的入侵和欺骗事件、萨班斯•奥克斯利法案、HIPAA法案规定和爱国
- 3. 品味“决定”艺术作品的好坏,设计的好坏则来自主观意见我们在鉴赏艺术作品时,用看法来表达当时的感觉,而你的品味则会左右你的看法。以一个有
- 如果说哪个开源程序不需要介绍大家就认识,那一定是phpMyAdmin,一款流行的MySQL数据库的Web管理界面。MySQL是全球最流行的W
- <html> <head> <title>获取ACCESS数据库表名 -&
- Create PROC P_viewPage
- 阅读上一章:Chapter 9 精简标签Part 2: Simplebits Of Style 简短精悍的样式Chap
- 首先,我们会document里添加mouseover事件时在HTMLElement上飘一个absolute的容器,设置border。接着,m
- 一个将人民币数字转化为大写的asp函数,可以准确读出数字的大写,而不是简单的将数字翻译为大写。有了这个工具大家就可以很方便的写出大写的人民币
- 中介者模式中介者模式(Mediator Pattern)是一种常用的设计模式,用于解决各个对象之间的复杂依赖关系,使得各个对象之间可以独立地
- <script type="text/javascript">/*<![CDAT