CSS Border使用分享:单像素三角形的实现
http://www.flypeng.com win10系统 发布时间:2015-08-29 11:19 来源:鹏鹏电脑知识网 浏览:加载中
原理:

css盒模型:

 


一个盒子包括:margin+border+padding+content 
– 上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。 
– 调整宽度大小可以调节三角形形状。

示例1:

一般情况下,我们设置盒子的宽高度及上下左右边框,会呈现如下图:

 

#test1 {
    height: 20px;
    width: 20px;
    border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
    border-style: solid;
    border-width: 20px;
}


示例2:

在上面基础上,我们把宽高度都设为0时,会呈现上述的边界斜线:

 

#test2 {
    height: 0;
    width: 0;
    overflow: hidden; /* 这里设置overflow, font-size, line-height */
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
    border-style: solid;
    border-width: 20px;
}


这时,其实我们已经看到有上下左右四个三角形了。如果4种颜色只保留一种颜色,余下3种颜色设置为透明(或者设置为和背景色相同的颜色),那不就出现一个小三角了吗?

示例3:

只保留上面的红色,看看:

 

#test3 {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #FF9600 transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
}


可是,IE6下不支持透明啊,会出现下图的样子:

 

找到一个在IE6下边框透明的文章中找到解决办法,如下例。

示例4:

IE6下,设置余下三条边的border-style为dashed,即可达到透明的效果,具体原因可以见参考资料3:

 

#test4 {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #FF9600 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: 20px;
}


当然,在IE6下,不设置透明,将其颜色设置为背景色,使其看不出来也是可以的。

示例5:

上面我们画的小三角的斜边都是依靠原来盒子的边,还有另外一种形式的小三角,就是斜边在盒子的对角线上:

 

#test5 {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #FF9600 #3366ff transparent transparent;
    border-style: solid solid dashed dashed;
    border-width: 40px 40px 0 0 ;
}


保留其中一种颜色,就可以得到斜边在对角线上的三角形了。多个这样的三角形,通过设置边框大小、颜色,拼凑起来可以形成任意形状的三角形:

 

像这种不规则的三角形,延伸一下,放在气泡框上,就可以省去拼背景图片的麻烦了:

 

另外,关于气泡框,可以使用棱形字符(◆)来实现,设置其font-size,颜色和背景色一致,定位可以使用margin负值和absolute绝对定位来实现。

应用之圆角生成:

应该说是近似圆角,其实由一个高度非常小的梯形展示出来。
- 上梯形(无上边框,下左右3px宽度,左右颜色去掉)+矩形+下梯形 

自适应圆角1: 
- 整个rc设置为“float: left”或“display: inline-block”分为top、bd、bottom,top中又有两个层rc1和rc2,rc1只设置border-top,高度为0,并设置左右margin呈短小的一横线,rc2只设置左右border并且左右margin小于rc1,height为1px,中间bd设置左右border,不设置左右margin。 
- 不过IE6&7出现bug:rc在IE6中依然显示为“dispaly: block”,而IE7中top和 bottom缩成一坨,不肯扩展开来,而在rc1/rc2/rc3中插入文字xxx后只能扩展到文字宽度,不能与bd对齐。

自适应圆角2 
- 自Google系产品的1px圆角按钮,共三层p,最外层p1正常设置边框宽度1px,呈现出上下边框线,中间p2只设置左右边框,且把左右margin设置成负值,呈现出圆角处的4个圆点,内层p3同样只设置左右边框,同时margin上下空出p2的高度,margin左右也设置与p2相同的负值。 

其他小问题:

- 透明:
IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题,原因是在IE6下,点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(height>=border-width*3),虚线宽长度必须是其宽度的5倍以上(height>=border-width*5),否则点线和虚线都不会出现。

- IE6的奇偶bug:
如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差.所以,尽量保证外框的高度或宽度为偶数值. 

- IE6的空p高度bug: 
IE6下,空p会有莫名的高度,也就是说“height: 0;”不顶用,此时形成的尖角的实际占高于其他浏览器是有差异的。可使用“font-size: 0;”+“overflow: hidden;”修复此问题。

- filter: chroma滤镜:
该属性属性可以设置一个对象中指定的颜色为透明色,如:
border-color: pink;
filter: chroma(color=pink);

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!