1、图片作为边框：border-image;
2、圆角问题：border-radius:上、下、左、右；
3、字体的阴影与自动换行：
阴影：
h1
{text-shadow: 5px 5px 5px #FF0000;}
换行：
p {word-wrap:break-word;}
4、旋转
5、过渡
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 3s, height 3s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 3s, height 3s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
transform: rotate(10deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>
原文：http://www.cnblogs.com/leyan/p/5106444.html