边框模拟小三角形

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

1. <style>

1. * {
   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 。

试着把上例的：

1. border-color:#fff #fff #fff #444;

改为这样：

1. 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 。