阴影是最常用的 CSS 效果之一，CSS3 标准已经增加了阴影属性，下面讨论一下阴影在各种浏览器里的实现方法。

CSS3 阴影

CSS3 里使用 box-shadow 属性定义块的阴影，基本语法如下：

1

box-shadow: 3px 3px 4px #000;

上面的样式里，前面两个 “3px” 表示阴影在 xy 两个坐标轴上的偏移量，x轴的正方向向右，y轴正方向向下。这个坐标和我们平时用的有点出入。在 Firefox 和 Webkit 等浏览器里，为了达到最高效率，建议通过私有的 hack 实现 CSS 阴影，可以这样写：

transform rotate 是CSS3里使对象旋转的一个属性，虽然目前所谓的兼容CSS3的浏览器对它的支持还不算好，但Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE里，这个属性无法通过一般的CSS去实现。

在W3C官方的标准里，通过transform属性使对象旋转的写法如下：

1

transform: rotate(40deg); /* 其中40是旋转的角度 */

可是由于目前几乎所有的浏览器对这个属性的渲染效率都很低，所以我们可以用下面的hack去提高渲染效率：

CSS3里的 target 和 focus 伪类都是针对特定元素的选择器，可以用来突出元素的位置。

target 伪类

target 伪类用于改变锚链接URL所指向的ID的样式。例如你要让页面页面里任何通过锚链接访问的元素字体都变成红色，可以这样写 *:target { color : red }。

需要注意的是，在添加 target 样式之前你必须为该元素指定一个id。效果请看我的 DEMO。

CSS3提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。这些伪类在刚接触的时候大家会觉得非常混乱，但当掌握了以后能大大提高你的代码效率，并且节省代码量。今天先要说的是nth-child伪类。

nth-child伪类的定义

nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素，可以使用an+b的形式选择子元素，举例用法如下：

1
2
3
4

tr:nth-child(2n+1) /* 选择表格里的单数行 */
tr:nth-child(odd)  /* 同上 */
tr:nth-child(2n)   /* 选择表格里的双数行 */
tr:nth-child(even) /* 同上 */

聪明的看官大概已经知道nth-child伪类可以用来干什么了。

CSS Drop-Down Menu Framework是一个基于GNU General Public License开源的纯CSS下拉菜单框架，能在IE5+、Firefox1.5+、Safari2+、Chrome1+和Opera7+这些浏览器上运行，但在IE6和IE6之前的浏览器里是通过JavaScript辅助的。你可以修改它，以应用在你的网站。CSS Drop-Down Menu Framework完全符合XHTML1.1和CSS2标准，使用这个框架，创建一个与众不同的下拉菜单只需要十几分钟。目前有Flickr、nVidia和Adobe等大型网站的下拉菜单都使用了这个框架。

貌似最近网上对CSS3的讨论真的很火，现在讲一下CSS3里目前用的比较广的RGBA属性的高级使用方法。这个属性的兼容问题比较简单，IE8已经支持这个属性，IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多，只是RGBA属性多了一个透明度的定义，CSS3标准里对RGBA属性的解释如下：

1
2
3
4
5

/* 基本语法 */
em { color: Rgba(red,green,blue,opacity) }
/* 举例 */
em { color: rgba(255,0,0,1) }    /* 红色，不透明 */
em { color: rgba(100%,0%,0%,1) } /* 同上 */

在现实中，使用三个1~255的十进制数值去定义一个颜色比用百分比更加准确，下面是几个颜色的RGB数值，大家在使用的时候只需要把00~FF的16进制数值换算成十进制就行了。

最近国外有开发者发现Firefox和Opera的一个BUG：无法改变按钮里文字的行高（包括input type=”sumbit”和HTML的button标签）。举个例子，对一个按钮使用以下样式：

1
2
3
4
5
6
7

input#button {
	border: 2px solid #06f;
	color: #06f;
	background-color: #6cf;
	font: bold 12px Arial, Helvetica, sans-serif;
	line-height: 50px;
}

按照常理，这个样式将为按钮设置50px的行高，并使文本垂直居中。因为这个样式在Chrome、Safari和IE8里的表现都一致，唯独在Firefox和Opera里并没有表现出50px的行高，具体效果如下图。

这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆，并如何利用它们。

如何使用border-radius属性

下面是border-radius属性最基本的使用方法。

1
2
3
4
5
6
7

.round {
	border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
	-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */
	-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */
 
	border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
}

关于在IE里怎么实现圆角，可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》这篇文章。

在网页设计越来越精美的今天，圆角的应用已经越来越广泛这篇文章将分别讲述圆角在CSS2和CSS3里的创建方法。

从易用性来说，CSS3不需要额外的标记和图片，比CSS2要先进得多。但当应用在网站上时，采用CSS2能使页面在主流浏览器上的效果更加一致。下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。

注：本文以第一个配图的效果作为演示。

用CSS2创建圆角的方法

1.固定宽度的圆角

这个是最简单的方法最多只需要使用两个图片（顶部和底部），并且也不需要添加额外的标记。在这里，我使用以下两个图片做背景：

段落间距网页设计里一个提升阅读体验的重要因素。但网页排版不想Word那样简单，你能否通过CSS有效率地设置段落间距呢？

网页设计里的文字排版问题

作为网页设计师，我们必须为文章的每个小标题和段落都预留一定的余量(在CSS通常使用margin)，但一个段落里所包含的元素（HTML标签）并不是一成不变的，这意味着你必须为这些可能存在的元素都设置一个明确的样式，避免产生多余的代码。

在逐步向W3C的标准过渡的前提下，目前设置段落间距的方法主要有两种：

通过类（Class）

为段落的第一个元素指定一个Class值，赋予margin-top:0。