1， 阴影效果.
通过使用带有一些padding之的背景图来添加阴影效果。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/dropshadow.htm
HTML：
<img class=”shadow” src=”sample.jpg” alt=”” />

CSS：
img.shadow {
            background: url(shadow-1000×1000.gif) no-repeat right bottom;
            padding: 5px 10px 10px 5px;
}

2，双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm

HTML：
<img src=”sample.jpg” alt=”" />

CSS：
img.double-border {
    border: 5px solid #ddd;
    padding: 5px; /*Inner border size*/
    background: #fff; /*Inner border color*/
}

3，图片外框效果
webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/framed.htm

HTML：
<div>
    <span> </span>
    <img src=”sample.jpg” alt=”" />
</div>

CSS：
.frame-block {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.frame-block span {
    background: url(frame.png) no-repeat center top;
    height:335px;
    width: 575px;
    display: block;
    position: absolute;
}

4，水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/watermark.htm

HTML：
<div>
    <img src=”sample.jpg” alt=”" />
</div>

CSS：
.transp-block {
    background: #000 url(watermark.jpg) no-repeat;
    width: 575px;
    height: 335px;
}
img.transparent {
    filter:alpha(opacity=75);
    opacity:.75;
}

5，为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/caption.htm

HTML：
<div>
    <img src=”sample.jpg” alt=”" />
    <cite>Salone del mobile Milano, April 2008 – Peeta</cite>
</div>

CSS：
.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
}
.img-desc cite {
    background: #111;
    filter:alpha(opacity=55);
    opacity:.55;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
}

我在前面的文章中曾经介绍过许多使用的在线优化css的网站，这些工具能够很好的对css文件进行批量格式化，使得css文件的可读性与css文件的大小成反比。也就是说优化后的代码将完全是混乱的，可读性非常差，但是体积很小。不利于后期的维护。

其实优化CSS文件非常简单，只要我们在网站完成之后把CSS文件做下规整，在编写的时候注意下一些比较常用的缩写方法，养成良好的习惯，你也可以让你的CSS文件做到真正的优化。

当属性值为0时
书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:
padding: 10px 5px 0px 0px;

试试这样吧:
padding: 10px 5px 0 0;

移除选择器
选择器是你在为一些元素应用CSS样式时的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。

div#logowrap

尝试扔掉多余的选择器吧:
#logowrap

在这个例子中所谓的那个选择器就是div

学会使用万能通配符*
要明智的使用*而避免它在整个CSS样式表中乱开玩笑，*是个通配符，你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如:

* {
margin: 0;
}

这个声明会将所有元素的margin值设置为0，同样的，为了严谨起见，你可以尝试这样设置:
#menu * {
margin: 0;
}

这样的声明是指将#menu下的所有元素的margin设为0。

背景的缩写方法
背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:
background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;

其实可以缩写成:
background: url(logo.png) no-repeat top center;

颜色
颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数字，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。

#000000 可以写成 #000, #336699 可以写成 #369

这种简写技巧只适用于成对出现的颜色值（即奇数位色值和偶数位色值相同时），其它颜色值不适用这种技巧，比如:
#010101, #223345, #FFF000

Margin(外边距/空白边)的缩写
声明CSS magin值得时候通常会写成这样:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;

让我们试试把值为0的单位去掉，并把4条声明合并成一条声明:
margin:0 10px 0 10px;    注：上 右 下 左 是这样的顺序

当你声名padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:
margin:0 10px;

它是指左右的值为10px，上下的值为0；Padding(内边距)padding的简写技巧等同于margin:

padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;

可以写成:
padding: 0 10px;             

Border(边框)边框的缩写
border缩写的方式相比其它声明来说会比较复杂，很多CSSer一开始都容易记混它的简写顺序，如果你想声明一个1像素宽的实线黑色边框，可能会写成:
border-width:1px;
border-style:solid;
border-color:#000;

其实可以写成:
border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。我们还可以为四个边设置不同的宽度:
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

可以简写成:
border-width:1px 2px 3px 4px;

最后，我们还可以只设置右和下边框的样式:
border-right:1px solid #000;
border-bottom:1px solid #000;

文字属性的缩写
文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋体, Arial, sans-serif;

其实可以优化成一行:
font:italic small-caps bold 1em/150% 宋体, Arial, sans-serif;

列表的缩写
list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);

可以写成:
list-style:square inside url(filename.gif);

再给大家举个综合的例子，请看下面的CSS代码：
.sample1 {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 12px;
margin-left: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 8px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}

将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：
.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000;
}

下面是CSS缩写性质的列表以及它们所表示的常规性质。

• Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
• Border（边框）：边框颜色、边框风格、边框宽度
• border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
• border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
• border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
• border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
• cue（声音提示）：前提示、后提示
• font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
• list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
• margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
• outline（大纲）：大纲颜色、大纲样式、大纲宽度
• padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
• pause（暂停）：后暂停、前暂停