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 { 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 { 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>