巧用CSS边框 制做专业技能冷却实际效果

日期:2020-09-25 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

线上演试:http://demo.jb51.net/js/2011/WarICONPrefect/index.htm
上面的实际效果看起来还非常好吧。在网页页面里,除用Flash,大家還是有很多方式能够完成它。

      明显这类实际效果不繁杂,1张情况照片,再加前面带有全透明度的多边形涂层,在脚本制作操纵下便可以转起来了。但难题在于用甚么方式来搭建这个多边形?

      在IE下能够用VML,别的访问器能够用Canvas这些。尽管行的通,但都并不是最简易的。细心剖析下,该实际效果实质便是若干个3角形拼接而成。而3角形,假如你熟习CSS2的话,1定在哪儿个地区见过。。。

      最先看来1个100*100规格的div,他有4条五颜六色的边框:

      自然,此时你看不出甚么。如今大家把div的边框宽度设定成50px:

      你发现甚么了?边框与边框之间的交界处处恰好是条斜线。如今大家把div的长宽都设定成0,而且试着更改每条边的边框宽度:

拷贝编码
编码以下:

<style>
.demo3
{
width: 0px;
height: 0px;
overflow: hidden;

border-top: 20px red solid;
border-right: 30px green solid;
border-bottom: 40px blue solid;
border-left: 50px #000 solid;
}
</style>
<div class="demo3"></div>

大家对其上右下左各自设定了20 30 40 50px的边框宽度,这时候便是展现出1个不规律的3角形了。大家还能够根据设定边框色调为transparent,让特定的边框掩藏掉(只特定1个方位上独立的边框是不容易显示信息出来的,最少要特定两个相连的方位才可以显示信息出来,因此要把不应该出現的方位上的设定成全透明)。比如:

拷贝编码
编码以下:

<style>
.demo4
{
width: 0px;
height: 0px;
overflow: hidden;
border-left: 50px #000 solid;
border-top: 20px red solid;
border-right: 0px green solid;
border-bottom: 0px blue solid;;
}
</style>
<div class="demo4"></div>

可是大家只需在其中1种色调,因此要把另个边框的色调设定成全透明。值得留意的是,IE6下边框色调不适用transparent值,自始至终显示信息为黑色,因此必须用个hack对于ie6,用chroma滤镜过虑掉黑色。(这1点谢谢CSDN上的网友X!ao_f的适用!)

提醒:您能够先改动一部分编码再运作

根据这个情况层,更好的看出在其中1个边框设定成全透明了。

       这般1来,大家只需建立若干个div,根据设定其边框来拼接成相应的多边形。

    

       客观事实上大家能够运用边框两侧的3角形,这样只需建立4个遮罩层。至于编码怎样写,拿张文稿纸出来,在上面推算下便可以了。