<style type="text/css">
body{margin:0padding:0}
.box1{height:300pxwidth:300pxbackground:#3695d5}
.box1{/*过渡效果*/
transition: width 2s
-moz-transition: width 2s /* Firefox 4 */
-webkit-transition: width 2s /* Safari 和 Chrome */
-o-transition: width 2s /* Opera */
}
.box1:hover{background:#dcdcdcheight:400pxwidth:400px}/*使用伪类hover，鼠标悬浮选取元素，改变样式*/
</style>
CSS3 有一个 :target 属性
这是一个简单的DEMO 高级用法可以再百度搜索：
<!DOCTYPE html><html>
<head>
<style>
:target {
border: 2px solid #D4D4D4
background-color: #e5eecc
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>
</body>
</html>
在一个id为bt1的按钮上设置样式，如下：
#bt1{
font-family:微软雅黑 <!-- 字体 --> width: 60px <!-- 宽度 -->height:30px <!-- 高度 -->
font-size:14px <!-- 字体大小-->
color:gray <!--字体颜色 -->
border: 1px solid red； <!-- 边框；边框宽度、单线、边框颜色 -->
margin-left: 10px <!-- 左边距，相应的还有右边距margin-right, 上margin-top,下 margin-buttom -->
background-color:#F1F1F1 <!--背景色；十六位颜色表示时前加#符号
transparent是透明-->
box-shadow:10px 10px 10px gray <!-- 阴影；x轴偏移（右偏为正），y轴偏移（向下 为正），模糊度，模糊颜色 -->
border-radius:10px 10px 10px 10px<!-- 圆角；左上，右上，右下，左下-->
cursor:pointer <!-- 鼠标经过时鼠标变成小手 -->
}
