CSS教程之利用CSS2.1的多重背景效果和边框效果
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。破洛洛文章简介：利用CSS2.1的多重背景效果和边框效果.
在单个HTML元素上使用CSS2.1完成具有3张背景图片和2张内容图效果，大概多重边框的效果。这类渐进加强的体例合用于一切撑持CSS2.1伪元素及其定位属性的一切扫瞄器。不必要CSS3的撑持。
演示：利用CSS2.1的多背景
演示：利用CSS2.1的多边框
撑持的扫瞄器：Firefox3.5+，Safari4+，chrome4+，opera10+，IE8+
是怎样完成的呢？
从实质上讲，我们所创立的伪工具（：before和：after）跟我们在看待HTML元素嵌套干系是不异的。但他们相对嵌套利用的HTML元素而言具有其共同的上风——不具有语义化。
当利用多背景大概多重边框的时分，我们必要将伪元素层的内容使用相对定位流动在HTML元素内容的前面。
并不是实在的内容被伪元素所包括举行定位。这意味着他们能在“父”元素局限内随便拉伸的同时而不会影响其内容。这能够恣意组合相对定位的top、right、bottom、left、width和height的值，次要关头是他们的组合功能是天真的。
能够到达甚么效果？
仅必要依附于一个HTML元素和相干的图片就能够创立相似于多背景色彩、多背景图、背景图片剪辑、图片翻转、利用图片边框的可扩大的盒模子、浮动的子虚列（小志注：前面会提到的三列等高效果）、在盒模子外的图片、显现在表面的多边框，和其他盛行的效果等。大概必要2张分外的内容图片在天生的内容中。
在利用CSS2.1的多背景和利用CSS2.1的多边框演示页面中将会展现怎样利用CSS2.1伪工具的手艺完成这些盛行的效果。
年夜部分的布局都包括子元素。因而，常常良多时分，你将有大概经由过程父元素的第一个子元素（设置是最初一个子元素）的伪元从来展现更多的效果。别的，还能够经由过程：hover对款式发生一些庞大的交互效果的变更。
破洛洛文章简介：利用CSS2.1的多重背景效果和边框效果.
示例代码：多背景图片
利用这类手艺我们能够重现相似于Silverback网站中只利用一个HTML元素的多背景图片效果。
该元素具有本人的背景图片和必要添补的空间。将该元素绝对定位后作为其伪元素的相对定位参考点。利用正值的z-index将有助于伪元素选择符合的z-index值（小志注：关于这句的翻译思索了好久一向没能选择符合的词来表达，次要的意义依据上面的代码我们能够看到是将伪元素的z-index值设置比元素本身的小便可，最好是用负值）。
Copytoclipboard]ViewCodeCSS1
#silverback{
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px200px50px;
background:#d3ff99url(vines-back.png)-10%0repeat-x;
}
两个伪元素将会经由过程相对定位的体例流动在该元素的双方。设置z-index值为-1将伪元素移到内容层的前面。如许伪元素将会位于元素的背景和边框下面，可是该元素的内容仍然能够选择。
Copytoclipboard]ViewCodeCSS1
#silverback:before,
#silverback:after{
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
每一个伪元素都具有一个可反复的背景图片属性。这是完成范例多重背景效果所必要的。
伪元素的content属性同意增加图片内容。如许我们就能够增加两张图片在一个伪元素中。能够经由过程改动伪元素的其他属性改动图片的地位，比方text-align和padding。
Copytoclipboard]ViewCodeCSS1
#silverback:before{
content:url(gorilla-1.png);
padding-left:3%;
text-align:left;
background:transparenturl(vines-mid.png)300%0repeat-x;
}
#silverback:after{
content:url(gorilla-2.png);
padding-right:3%;
text-align:right;
background:transparenturl(vines-front.png)70%0repeat-x;
}
利用CSS2.1的多重背景图效果制品。
破洛洛文章简介：利用CSS2.1的多重背景效果和边框效果.
示例代码：浮动的子虚列
别的一个使用是创立一个不必要图片大概分外嵌套容器的等高列（小志注：这里展现的是三列等高的效果）。
这个HTML布局十分复杂。我已经依附于CSS2.1选择器利用特定类名在每个子元素的div标签上，但IE6不撑持。假设不必要IE6的撑持的话，其实不必要指定类名。
ViewCodeXML1
<divid="faux">
<divclass="main"></div>
<divclass="supp1"></div>
<divclass="supp2"></div>
</div>
对这个具有百分比的容器再次设置绝对定位和正值的z-index。使用overflow:hidden;次要是为了包括其子元素浮动后的容器（小志注：也就是扫除浮动的一种体例），和埋没溢出的伪元素。背景色彩将作为个中一列的背景致。
Copytoclipboard]ViewCodeCSS1
#faux{
position:relative;
z-index:1;
width:80%;
margin:0auto;
overflow:hidden;
background:#ffaf00;
}
经由过程界说子元素的div标签为绝对定位以后，还能够把持独自列的地位。
Copytoclipboard]ViewCodeCSS1
#fauxdiv{
position:relative;
float:left;
width:30%;
}
#faux.main{left:35%}
#faux.supp1{left:-28.5%}
#faux.supp2{left:8.5%}别的百分百高度的两列被创建于定位的地位和定位属性的伪元素，同时设置了背景致。这些背景能够用（反复的）图片取代，假如有必要的话。
Copytoclipboard]ViewCodeCSS1
#faux:before,
#faux:after{
content:"";
position:absolute;
z-index:-1;
top:0;
left:33.333%;
width:100%;
height:100%;
background:#f9b6ff;
}
#faux:after{
left:66.667%;
background:#79daff;
}
破洛洛文章简介：利用CSS2.1的多重背景效果和边框效果.
利用CSS2.1的多重背景效果制品。
示例代码：多边框
多边框的处置体例有良多相相似的地方。使用这些体例能够制止利用图片而发生复杂的效果。
元素必需具有绝对定位属性，而且在必要有添补发生充足的宽度给由伪元素创立的分外的边框。
Copytoclipboard]ViewCodeCSS1
#borders{
position:relative;
z-index:1;
padding:30px;
border:5pxsolid#f00;
background:#ff9600;
}
将伪元素相对定位在盒子中，并明白与元素盒模子边距之间的间隔，设置z-index值为负值后挪动到内容层的前面，同时设置你所必要的边框色和背景致。
Copytoclipboard]ViewCodeCSS1
#borders:before{
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5pxsolid#ffea00;
background:#4aa929;
}
Copytoclipboard]ViewCodeCSS1
#borders:after{
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5pxsolid#00b4ff;
background:#fff;
}
就是这么复杂。一个利用CSS2.1的多边框效果制品就有了。
渐进加强和传统扫瞄器
IE6和IE7不撑持CSS2.1伪元素，将会疏忽一切：before和：after声明。它们没有任何加强，但保存着基础的利用习气。
关于Firefox3.0的一个告诫
Firefox3.0固然撑持CSS2.1伪元素但不撑持其定位。固然没有撑持这部分的效果，但另外一些完整不受影响，而且不晓得后续的Firefox3.0版本将会甚么时分优化成完善撑持这类手艺。偶然，能够经由过程界说display:block款式属性能够改善伪元素的表面款式。
利用今朝的体例，请求其定位伪元素，倡议思索Firefox3.0撑持的主要性和您的用户今朝利用的扫瞄器比例。
翻译以外的器材，一点点团体意见
这篇文章我不晓得是甚么时分有的，不外原文前面是对CSS3的属性一些内容，我丢弃了，由于事先看到这篇文章次要是冲着利用CSS2.1的伪工具体例完成效果而往的。当我看到文章中提到用伪工具完成三列等高的时分，我暗示非常惊奇，也许剖析了一下如许的等高处置体例也存在着一点点小成绩，好比背景图片定位（不撑持伪工具的扫瞄器不思索在内了）。顺带说一下，已经思索过在伪工具的content属性中增添图片，但一向觉得是不成能完成的，就没实验了，如今看到了，我也分明了，凡事只要实验事后才干往确认！
原文：http://blog.linxz.cn/multiple_backgrounds_and_borders_with_css2/
</p>
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
页:
[1]