5.15日音讯,网页中border三角知识详解

　　5.15日音讯,网页中border三角知识详解。利用CSS的border属性可以生成一些图形，例如三角或是圆角。一、前言

　　利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSSborder属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSSborder圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。

　　二、CSSborder生成三角技术简介

　　效果抢鲜

　　下图为使用CSS的border属性实现的三角效果：

　　复制代码代码如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ff3300#ffffff#ffffff;}

　　如何实现的，为何会有这样的效果，不急，takeiteasy!

　　梯形图案

　　看下面这段样式：

　　复制代码代码如下:.test{width:10px;height:10px;border:10pxsolid;border-color:#ff3300#0000ff#339966#00ff00;}

　　当某个p应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：

　　更进一步–部分边框透明

　　现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。

　　复制代码代码如下:.test{width:10px;height:10px;border:10pxsolid;border-color:#ff3300#ffffff#ffffff#ffffff;}

　　结果如下图（截自Firefox3.5）：

　　得到的是一个梯形。

　　从梯形到三角

　　上面的是梯形，我要想得到一个三角图案该怎么办呢？显然，很简单，把p的高宽都变成0，只留一边，不就是三角了吗？如下代码：

　　复制代码代码如下:.test{width:0;height:0;border:10pxsolid;border-color:#ff3300#ffffff#ffffff#ffffff;}

　　结果如下（依旧截图自Firefox3.5）：

　　从等腰直角三角形到普通等腰三角

　　上图为等腰直角三角形，之所以为等腰直角，是因为所有的边框宽度是一样的，如果我们将边框宽度设置为不同，那会怎样？则会形成等腰三角形。如下代码：

　　复制代码代码如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ffffff#ffffff#ffffff;}

　　得到的结果如下图：

　　从等腰到不等腰

　　我们可以不局限于保留一条边框，我们可以保留两条，于是我们可以告别等腰，得到更加锐利的三角，正如一开始所展示的那个三角：

　　复制代码代码如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ff3300#ffffff#ffffff;}