css3 圆角，影子，转换，移动，缩放简单示例用法
日期：2014-05-17 浏览次数：20644 次
下面的代码只可以在chrome浏览器下运行才看到效果
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圆角，阴影，旋转，缩放，移动</title>
?
<style type="text/css">
#box{
position:relative;
width: 120px;
height: 100px;
margin: 10px auto;
top: 200px;
padding: 20px;
background: rgba(204,204,51,.7);
text-align: center;
-webkit-border-radius: 18px; /*设置元素的border的圆角半径，值越大半径就越圆*/
-webkit-box-shadow: 10px 5px pink inset; /*设置元素的阴影效果，距离left 10px top 10px 转换的颜色，inset让阴影在上面显示*/
-webkit-transition:-webkit-transform 1s ,opacity 1s;
}
#box:hover{
/*类似于a标签的hover事件*/
/*-webkit-transform:rotate(360deg),scale(1.2,1.4) ,skew(0.2,0.6) ,translate(100px,50px);*/
-webkit-transform: rotate(360deg);
-webkit-transform: scale(0.5,0.5);
-webkit-transform: translate(50px,30px); /*上面的rotate，scale，translate同时用，后者的会生效，前面的几个不会起作用*/
opacity: 0.5;
}
</style>
?
</head>
<body>
<div id="box">
? ? <p id="text">this is text;</p>
? ? </div>
</body>
</html>
