边框模拟小三角形

利用边框模拟出小三角形，比较有创意。

```
<style>
```

* {
font-size:14px;/*字体大小 */
}
span {
display:block;
font:0/0 "宋体";
border:7px solid;/* border值越大,三角形越大 */
border-color:#fff #fff #fff #444;/* 改变颜色产生不同效果 */
margin-top:5px
}
</style>
<div>
<span></span>
</div>

刚才去试了下，发现好看是好看但不实用，不过它也提醒了我们有必要去重温一下border的样式属性：

语法：

border-color : color

　　设置对象边框的颜色。

　　如果提供全部四个参数值，将按上-右-下-左的顺序作用于四个边框。

　　如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上-下，第二个用于左-右。如果提供三个，第一个用于上，第二个用于左-右，第三个用于下。

　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

　　在 IE5.5+ 中，边框属性可以直接应用于内联要素。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为absolute ，或者设定 display 属性为 block 。

　　如果 border-style 设置为 none ，本属性将失去作用。对应的脚本特性为 borderColor 。

试着把上例的：

```
border-color:#fff #fff #fff #444;
```

改为这样：

```
border-color:#fff #444 #fff #444;
```

慢慢理解吧;看到这我又不得不去看一下border-style及border-width引用手册如下：语法：

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 
　　设置对象边框的样式。

　　如果提供全部四个参数值，将按上-右-下-左的顺序作用于四个边框。如果只提供一

　　个，将用于全部的四条边。如果提供两个，第一个用于上-下，第二个用于左-右。如

　　果提供三个，第一个用于上，第二个用于左-右，第三个用于下。

　　取值：

　　none :　默认值。无边框。不受任何指定的 border-width 值影响

　　hidden :　隐藏边框。IE不支持

　　dotted :　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实

　　线

　　dashed :　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为

　　实线

　　solid :　实线边框

　　double :　双线边框。两条单线与其间隔的和等于指定的 border-width 值

　　groove :　根据 border-color 的值画3D凹槽

　　ridge :　根据 border-color 的值画3D凸槽

　　inset :　根据 border-color 的值画3D凹边

　　outset :　根据 border-color 的值画3D凸边

　　说明：

　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

　　在 IE5.5+ 中，边框属性可以直接应用于内联要素。而在此前的版本中，内联要素要使

　　用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 a

　　bsolute ，或者设定 display 属性为 block 。

　　对应的脚本特性为 borderStyle 。

　　语法：

　　border-width : medium | thin | thick | length

　　取值：

　　medium :　默认值。默认宽度

　　thin :　小于默认宽度

　　thick :　大于默认宽度

　　length :　由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位

　　

　　说明：

　　设置对象边框的宽度。

　　如果提供全部四个参数值，将按上-右-下-左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上-下，第二个用于左-右。

　　如果提供三个，第一个用于上，第二个用于左-右，第三个用于下。

　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

　　在 IE5.5+ 中，边框属性可以直接应用于内联要素。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为

　　absolute ，或者设定 display 属性为 block 。

　　如果 border-style 设置为 none ，本属性将失去作用。对应的脚本特性为 borderWidth 。