CSS3 下select下拉列表样式的修改
都知道页面中如果不给select添加样式的话，就会是系统默认的样式，如下图，很丑吧！
而狠多时候我们都希望对select的样式进行修改，以使得它能够更加美观一点，在css2.0下面我们除了设置一些基本
的样式之外，是没有办法把select变的更好看的，尤其是那个很丑的下拉箭头我是没有正常的办法把它隐藏掉的。总
结了一下，更改select样式有如下几种方法：
（1）如果只是为了去掉select的下拉箭头的话，可以用css样式clip:rect(x x x x )来吧select的下拉箭头部分直接截取
掉。但是这种方法存在的问题就是，如果设置了select的border的话，截取就会把border也截去，很是不美观。
（2）还有一种方式应该是css2.0时候用的非常多的，就是利用div+css来模拟select的界面，这种方式的优点就是可
以制作出各种各样非常漂亮的select下拉框，但是缺点就是需要用javascript来实现select的实际功能。
（3）如果在CSS3 下要做一个稍微漂亮一点的select就相对容易了，因为CSS3下增加了border-image属性，可以设
置边框的图片，而且这个属性对于select来说是有很大的用处的，比如下面的这个样式的select：
是不是比系统自带的select样式漂亮很多啊，而且也可以制作各种漂亮的样式，而不需要使用javascript来模拟
select的功能，是不是很好啊！
在使用这种方法来修改select的界面之前需要了解一下border-image.
语法：border-image：url area type
参数：url 表示的是图片的路径
area 表示的是图片显示的区域，下面用一张图来解释比较方便（懒得画，贴了张别人的图）
例如 border-image: url("bord3.png") 10 15 20 25用图来表示就是下面的这张图了
这个东西有人说是叫九宫格，我也不太清楚是个什么东西，只是用来方便border-image的理解罢了。
不过也需要提醒一句的是虽然border-image: url("bord3.png") 10 15 20 25;的默认单位都是像素px，
但是在实际的使用中是不能带px的，可以使用百分比
type 表示的就是一些图片显示的样式 有三个值： stretch拉伸（默认值）repeat（重复） round（平铺）
表示的有两个方向：水平和垂直（顺序不要颠倒）。
eg: border-image: url("bord3.png") 10 15 20 25 stretch stretch;表示的是水平和垂直方向都为拉伸
关于border-image的理解我也有文章做介绍。
具体实现方法：
提供一张用于border-image的图片
bord3.png
<select id='sel'>
<option>选项一</option> <option>选项二</option><option>选项三</option>
</select>
#sel{
-webkit-border-radius:5px ; -moz-border-radius:5px;
border-width:0px 21px 0px 5px;
-webkit-border-image:url("bord3.png") 0 21 0 5; -moz-border-image:url("bord3.png") 0 21 0 5px;
}
（4）还有一种方法也可以修改select的样式，但是仍然保留select的功能。其实这种方法也是很巧妙的，他的原理就是
在一个链接里加入一个select下拉列表，然后设置select为透明即可，将select以透明的形式放在链接中，在点击链接
的同时就触发了select的点击。
实现方式：
<a href="javascript:void(0)" class="selOuter">
<select class="sel">
<option >选项一</option><option>选项二</option>
</select>
</a>
.selOuter{position:relative;width:100px;height:35px;background:url("bord3.png");display:inline-block;}
.selOuter select{top:0px;left:0px;position:absolute;width:100px;height:35px;opacity:0;}
这里必不可少的就是设置外层链接a样式position:relative;因为只有外层设置了relative之后，里层的select才能以外层为基准去定位，而不是以body来定位。select必须设置的是position:absolute;top:0px;left:0px;主要的目的还是让select填充满
链接的整个区域，设置display:inline-block的目的是为了设置它的宽度，否则在非标准的状态下是不能给行内元素设置宽度和高度的。
