1、css圆角实现的方式有很多种，最简单最方便的是使用border-radius属性。或者使用圆角图片。
2、border-radius后面直接接数值。
3、图片圆角就是事先切除圆角图片，可以制作定高，或者定宽的div。
4、使用border-radius的优点是无序添加多余结构代码，但是对于低版本的浏览器支持有问题。使用图片圆角不会有兼容问题，但是会多出多余的代码和结构。
顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用border属性。
边框样式border-style必须写！否则其它属性全部失效。
边框的样式：
border后面可跟多个值，中间用空格分离，含义如下：
注意顺序， 边框样式不可省略 ，颜色和宽度可以省略，会显示默认的效果。
——以上规律在padding和margin一样适用。
边框样式border-style必须设置
如果我们的四条边框属性都是一样的，那么统一设置就可以啦，注意边框类型不可省略。
首先我们放置一个宽高为200px的粉色盒子。
接下来我们为它加上一条宽度为10px，样式为实线，颜色为红色的边框。
我们可以看到，添加边框的时候，是在盒子外面套一圈边框，而不是加在里面，在Chrome浏览器中点击右键检查，可以看到div的大小变成了220x220。
套在外面的边框的宽度是会加进盒子尺寸的（上下左右各增加了10px），如果我们想盒子保持大小不变，要对div本身的width和height进行减小，在这个样例中，通过计算可得，减少到180px即可保持大小不变。
当我们使用点状、虚线等边框样式时，多出来的缝隙，会使用元素本身的 背景颜色 填充。
点和虚线的具体样式，不同浏览器中可能会不一样。
我们为刚刚的盒子设置上边框为红色，左边框为绿色，效果如下图所示：
我们会发现在两条边框交界处的小方块，通过一条对角线分隔，上边框和左边框各占一半。当边框不一样宽时，同样也是用对角线把交界处的小长方形一分为二，如下图所示：
当被添加边框的元素宽度为0，不设置高度（高度默认是0）的情况下，我们可以巧妙利用 边框组合 和 transparent（透明） 绘制三角形，可以体验下哦。
三角形1-css：
三角形2-css：
多彩三角形-css：
绘制梯形只要对应添加宽度或者高度就可以啦
梯形1-css：
梯形2-css：
select样式要想非常好看，单用CSS是实现不了的，必须要用到JS才行！下面这个例子是CSS实现的效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>如何让select的样式也漂亮起来</title>
<style type="text/css">
<!--
.select * {
margin: 0
padding: 0
}
.select {
border:1px solid #cccccc
float: left
display: inline
}
.select div {
border:1px solid #f9f9f9
float: left
}
/* 子选择器，在FF等非IE浏览器中识别 */
.select>div {
width:120px
height: 17px
overflow:hidden
}
/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
display:block
float: left
margin: -2px
}
.select div>select {
display:block
width:124px
float:none
margin: -2px
padding: 0px
}
.select:hover {
border:1px solid #666666//鼠标移上的效果
}
.select select>option {
text-indent: 2px//option在FF等非IE浏览器缩进2px
}
-->
</style>
</head>
<body><div class="select">
<div>
<select>
<option>看见效果了吧</option>
<option>看见效果了吧</option>
<option>看见效果了吧</option>
</select>
</div>
</div>
</body>
</html>
-------------------
关于JS代码，你可以去看下这个，改了之后就能达到你要的效果：
http://www.geekso.com/select-css/
单纯的CSS是实现不了的！！！
