最近写一个前台页面，因为不用考虑太多兼容性问题，尝试了很多css3的东西，记录下。
1、渐变和边框阴影
最初的视觉稿，上面有很多地方颜色使用了渐变，为了不使用图片，用了很挫的方式来实现：从图片渐变开始、中间、结束部分，用gimp的吸管获取颜色，然后转换成css的渐变。不过因为渐变每个浏览器支持方式不太一样，有一些在线生成css的网站还是不错的，比如这个和这个。
边框阴影，也就是box-shadow属性。按照MDN的文档，值的组成是这样的：
box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]现在的浏览器支持的不错了，有些框外面加点阴影，效果会好点。
2、绑定事件
很多地方为了突出（其实大部分因为上头有人说要弄的炫一点），需要在鼠标移动过去之后，增加点效果。比如增加padding、改变颜色或者展示浮出层。css有一些dynamic pseudo-classes（不知道怎么翻译，从这里抄过来的），可以选择有指定状态的元素。比较常见的应该就是hover，在鼠标移入，但没有触发元素的时候（The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it）。
比如，菜单中，如果鼠标移动到某个菜单项，但是还没有点击的时候，需要突出这个菜单项，可以这么做（这里菜单项是个简单的a元素）：
[cce lang=”css”]
ul#main-nav > li > ul > li > a {
display: block;
width: 100%;
text-decoration: none;
font-size: 13px;
color: black;
}
ul#main-nav > li > ul > li > a:hover {
color: #FE9900;
font-size: 14px;
}
[/cce]
这样，在鼠标移动到菜单项上，会使下面一个选择器生效，将当前的字体放大，颜色变色。
3、css选择器
上面那个例子，已经用了一些css选择器了，这里再记录下其他用到的选择器：
- id选择器（#ID）：页面上带了id属性的，精确而且方便
- 类选择器(.class)：元素class属性带的，用的应该也是最多的
- 直接选择元素(tagname)：直接使用元素名称，我一般习惯和class或者id共用，不太喜欢给全局某个元素加上很多样式，虽然统一，但是场景太多，有些地方不好控制。
- 属性选择器([attr=”xxx”])：这个用来兼容老的标签比较好，比如表格单元格要居中显示，原先可能会直接写成：
[cce lang=”html”]
<td valign="middle"></td>
[/cce]
但是表格加了样式后，这些属性会失效（这个没去找原因），可以在样式表中这样写：
[cce lang=”css”]
td[valign='middle'] {
vertical-align: middle;
}
[/cce]
这样就能给在标签中加了valign属性的元素，再加上vertical-align的样式属性了。 - 伪选择器：前面用到了:hover这个伪类，其他类似的还有:focus等，能够用来标识元素的不同状态。另一类伪类选择器，可以从一堆元素中筛选需要的元素，对我最有用的就是:nth-child了。:nth-child(an+b)像一个函数，通过设置不同的a和b，计算出可以取的正整数：
[cce lang=”css”]
tr:nth-child(2n+1) /* 表格中的奇数行，也可以用tr:nth-child(odd)表示 */
tr:nth-child(2n+0) /* 偶数行，也可以用tr:nth-child(even)表示 */
[/cce]
另外还有一个很有用的伪选择器，是可以创建伪元素，这样就可以在需要的元素前后增加自己需要的东西（图标等）。
[cce lang=”css”]
.btn-icon-add::before {
content: url(“icons/edit_add.png”);
}
[/cce]
这样能在加了btn-icon-add class的元素前面，增加一个元素，内容是url中的图片。这里遇到过一个问题，就是到底用一个冒号，还有两个冒号。在ff和chrome中，一个冒号和两个冒号都可以，但是ie8（其他ie没试过）只能识别一个冒号的。google了一下，有人说是两个冒号是css3定义的，为了区别css2中定义的其他伪选择器，但是可以用一个冒号，以保持向下兼容。 - 组合选择器：用的最多的应该就是空格、>、+等，空格表示空格后面元素是前者的后裔，和>的区别是>表示直接子元素。加号表示临近的兄弟元素。不过目前没法选择父元素，这个比较恶心。