本篇内容需要熟练掌握CSS的基本语法和常用属性。
先讲点昨天没讲完的东西。
颜色
CSS的颜色除了直接支持white、black之类的常见颜色单词（甚至包括steeelblue等奇怪的单词，事实上，CSS支持147个颜色单词）以外，还支持#开头的十六进制颜色值，例如#123456，解释方法是两个字符一组，转为十六进制。奇葩的是，如果这三组的两个数字都相同，那么可以省略为三个字符——#336699可以省略为#369。CSS还可以使用rgb(64,0,127)这样的RGB值，最新的CSS3还支持rgba(64,0,127,0.5)这样的RGBA值。所以，该用什么颜色，随你定啦。
伪类
昨天讲了一个【:hover】，表示鼠标移过的时候的效果，其实CSS还有一个【:active】，表示鼠标在该元素上按下时候的效果。所以可以用来做一个按钮了！把.button设成background-color:#DDD，.button:hover设成background-color:#EEE，.button:active设成background-color:#999，再试试效果！（P.S.如果一个效果在伪类下保持不变，那么可以不用写。）
单位
最常用的单位是px（像素），也就是屏幕上的一个点。但是随着目前移动设备的普及（移动开发的基础后续会讲），网页需要兼容不同类型的窗口大小，这时候就不能用固定的单位了（想想绝大部分的网页都是按照宽度为960px来设计的，这样可以在电脑屏幕上显示的很好，不过换成手机试试……）。宽高和位置可以用%（百分比），例如width:100%，而字体可以用em（相对尺寸），1em就是当前的字体尺寸——这个是依据浏览器的设定，而1.3em就相当于当前字体尺寸的130%。
下面开始今天的新内容！
“CSS只能挪动元素、改变元素大小、给元素加一点格式吗？弱爆了！”
如果这样说，那么恐怕弱爆了的是你了。最新标准CSS3支持一系列特效，比如说我主页上的动画都是用CSS写的，以后要学的JavaScript只占了很少的比重。虽说是个简单的上拉下拉动画，但是在以前，可是要调用大量JavaScript代码的。
border-radius用于给div加上圆角：
div {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 2px solid gray;
/* 这里是新内容！ */
border-radius: 20px;
}<div>圆角矩形</div>只需要一句border-radius，即可设置圆角的半径。CSS2中必须用四张图片来做圆角，而且圆角的半径改起来也很麻烦。
box-shadow可以用来给div添加阴影：
div {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #DDD;
/* 这里是新内容！ */
box-shadow: 2px 2px 3px black;
}<div>这是阴影</div>为了区分阴影阴影的四个参数的意思从左到右分别是：往右挪多少，往下挪多少，模糊多少，是什么颜色。好理解吧？再看看我们学校计院的网站，还在用图片实现阴影。虽说现在是为了兼容老版本的浏览器，但是在以后已经没有必要了。
text-shadow用于给文字添加阴影：
span {
font-size: 2em;
/* 这里是新内容！ */
text-shadow: 1px 1px 2px #09F;
}<span>文字阴影</span>阴影的四个参数含义跟box-shadow完全一样。
transform用于对div元素进行2D的转换，例如旋转：
div {
transform:rotate(10deg);
-ms-transform:rotate(10deg); /* IE 9 */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari 和 Chrome */
-o-transform:rotate(10deg); /* Opera */
}需要注意的是，这个属性目前是需要跨浏览器支持的，所以要加上各种浏览器的私有前缀。
transition可以给元素的效果加上动画。与CSS的【:hover】选择器配合，我们可以写出很炫的特效来：
div {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #92B901;
/* 这里是新内容！ */
transition: all 2s ease 0;
}
div:hover {
transform: rotate(360deg);
transition: all 2s ease 0;
background-color: #1ec7e6;
}<div>看，动画！</div>博客里不方便直接演示，不过大家可以自己试试。是很炫吧？
作业：给昨天的网页加上简单的圆角、阴影和动画效果，尽量让其看起来“现代化”。
CSS的基础篇就到这里了。由于CSS的属性过于繁多，所以一般需要什么效果的话直接到网上找即可。
后续会发布与移动开发相关的CSS教程，不过时间未定……