日期:2014-05-17  浏览次数:20608 次

css3 圆角,阴影,转换,移动,缩放简单示例用法

下面的代码只可以在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>