css2.1多种情况和边框实际效果完成基本原理及编

2021-03-10 22:35 jianzhan

在单独HTML元素上运用CSS2.1完成有着3张情况照片和2张內容图实际效果,或多种边框的实际效果。这类渐进提高的方法可用于全部适用CSS2.1伪元素及其精准定位特性的全部访问器。不必须CSS3的适用。

适用的访问器:Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+

是怎样完成的呢?

从实质上讲,大家所建立的伪目标(:before和:after)跟大家在对待HTML元素嵌套循环关联是同样的。但她们相对嵌套循环应用的HTML元素而言具备其与众不同的优点——不具备词义化。

当应用多情况或多种边框的情况下,大家必须将伪元素层的內容运用肯定精准定位固定不动在HTML元素內容的后边。

并不是真正的內容被伪元素所包括开展精准定位。这代表着她们能在“父”元素范畴内随便拉伸的另外而不容易危害其內容。这能够随意组成肯定精准定位的top、right、bottom、left、width和height的值,关键重要是她们的组成特性是灵便的。

能够做到甚么实际效果?

仅必须依靠于1个HTML元素和有关的照片便可以建立相近于多情况色调、多情况图、情况照片剪辑、照片旋转、应用照片边框的可拓展的盒实体模型、波动的虚报列(小志注:后边会提到的3列等高效率果)、在盒实体模型外的照片、显示信息出外面的多边框,和别的时兴的实际效果等。将会必须2张附加的內容照片在转化成的內容中。

在应用CSS2.1的多情况和应用CSS2.1的多边框演试网页页面中可能展现怎样应用CSS2.1伪目标的技术性完成这些时兴的实际效果。

绝大多数的构造都包括子元素。因而,常常许多情况下,你将有将会根据父元素的第1个子元素(设定是最终1个子元素)的伪元向来展现更多的实际效果。另外,还能够根据:hover对款式造成1些繁杂的互动实际效果的转变。

示例编码:多情况照片

应用这类技术性大家能够重现相近于Silverback网站中只应用1个HTML元素的多情况照片实际效果。

该元素有着自身的情况照片和必须填充的室内空间。将该元素相对性精准定位后做为其伪元素的肯定精准定位参照点。应用恰逢的z-index将有助于伪元素挑选适合的z-index值(小志注:针对这句的汉语翻译思索了很久1直没能挑选适合的词来表述,关键的意思依据下面的编码大家能够看到是将伪元素的z-index值设定比元素本身的小便可,最好是是用负值)。

拷贝编码
编码以下:

#silverback {
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px 200px 50px;
background:#d3ff99 url(vines-back.png) ⑴0% 0 repeat-x;
}

两个伪元素可能根据肯定精准定位的方法固定不动在该元素的两侧。设定z-index值为⑴将伪元素移到內容层的后边。这样伪元素可能坐落于元素的情况和边框上面,可是该元素的內容仍然能够挑选。

拷贝编码
编码以下:

#silverback:before,
#silverback:after {
position:absolute;
z-index:⑴;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}

每一个伪元素都有着1个可反复的情况照片特性。这是完成种类多种情况实际效果所必须的。

伪元素的content特性容许加上照片內容。这样大家便可以加上两张照片在1个伪元素中。能够根据更改伪元素的别的特性更改照片的部位,比如text-align和padding。

拷贝编码
编码以下:

#silverback:before {
content:url(gorilla⑴.png);
padding-left:3%;
text-align:left;
background:transparent url(vines-mid.png) 300% 0 repeat-x;
}

#silverback:after {
content:url(gorilla⑵.png);
padding-right:3%;
text-align:right;
background:transparent url(vines-front.png) 70% 0 repeat-x;
}

应用CSS2.1的多种情况图实际效果制成品。

示例编码:波动的虚报列

此外1个运用是建立1个不必须照片或附加嵌套循环器皿的等高列(小志注:这里展现的是3列等高的实际效果)。

这个HTML构造十分简易。我以前依靠于CSS2.1挑选器应用特殊类名在每个子元素的div标识上,但IE6不适用。倘若不必须IE6的适用的话,其实不必须特定类名。

拷贝编码
编码以下:

<div id="faux">
<div class="main">[content]</div>
<div class="supp1">[content]</div>
<div class="supp2">[content]</div>
</div>

对这个有着百分比的器皿再度设定相对性精准定位和恰逢的z-index。运用overflow:hidden;关键是以便包括其子元素波动后的器皿(小志注:也便是消除波动的1种方法),和掩藏外溢的伪元素。情况色调将做为在其中1列的情况色。

拷贝编码
编码以下:

#faux {
position:relative;
z-index:1;
width:80%;
margin:0 auto;
overflow:hidden;
background:#ffaf00;
}

根据界定子元素的div标识为相对性精准定位以后,还能够操纵独立列的部位。

拷贝编码
编码以下:

#faux div {
position:relative;
float:left;
width:30%;
}

#faux .main {left:35%}
#faux .supp1 {left:⑵8.5%}
#faux .supp2 {left:8.5%}

此外百分百高宽比的多列被创建于精准定位的部位和精准定位特性的伪元素,另外设定了情况色。这些情况能够用(反复的)照片替代,假如有必须的话。

拷贝编码
编码以下:

#faux:before,
#faux:after {
content:"";
position:absolute;
z-index:⑴;
top:0;
left:33.333%;
width:100%;
height:100%;
background:#f9b6ff;
}

#faux:after {
left:66.667%;
background:#79daff;
}

应用CSS2.1的多种情况实际效果制成品

示例编码:多边框

多边框的解决方法有许多相相近的地方。运用这些方法能够防止应用照片而造成简易的实际效果。

元素务必具备相对性精准定位特性,而且在必须有填充造成充足的宽度给由伪元素建立的附加的边框。

拷贝编码
编码以下:

#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}

将伪元素肯定精准定位在盒子中,并确立与元素盒实体模型边距之间的间距,设定z-index值为负值后挪动到內容层的后边,另外设定你所必须的边框色和情况色。

拷贝编码
编码以下:

#borders:before {
content:"";
position:absolute;
z-index:⑴;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#borders:after {
content:"";
position:absolute;
z-index:⑴;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}

便是这么简易。1个应用CSS2.1的多边框实际效果制成品就有了。

渐进提高和传统式访问器

IE6和IE7不适用CSS2.1伪元素,可能忽视全部:before和:after申明。它们沒有任何提高,但保存着基础的应用习惯性。

有关Firefox 3.0的1个警示

Firefox 3.0尽管适用CSS2.1伪元素但不适用其精准定位。尽管沒有适用这一部分的实际效果,但另外一些彻底不会受到危害,而且不知道道后续的Firefox 3.0版本号可能何时提升成完善适用这类技术性。有时,能够根据界定display:block款式特性能够改善伪元素的外型款式。

应用现阶段的方法,规定其精准定位伪元素,提议考虑到Firefox 3.0适用的关键性和您的客户现阶段应用的访问器占比。

汉语翻译以外的物品,1点点本人观点

这篇文章内容我不知道道是何时有的,但是原文后边是对CSS3的特性1些內容,我抛下了,由于那时候看到这篇文章内容关键是冲着应用CSS2.1的伪目标方法完成实际效果而去的。当我看到文章内容中提到用伪目标完成3列等高的情况下,我表明10分诧异,大约剖析了1下这样的等高解决方法也存在着1点点小难题,例如情况照片精准定位(不适用伪目标的访问器不考虑到在内了)。顺便说1下,以前考虑到过在伪目标的content特性中提升照片,但1直认为是不能能完成的,就没尝试了,如今看到了,我也搞清楚了,凡事仅有尝试之后才可以去确定!