下面的代码只可以在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>
分享到:
相关推荐
css3圆角阴影价格表 css3圆角阴影价格表网页特效.zip
最基本的css3效果,很好用,很强大,值得参考使用。
使得IE支持CSS3 圆角阴影 渐变
css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角
解决IE不兼容css3圆角和阴影问题
CSS3完美支持IE圆角阴影样式是一款基于jquery css3实现的圆角样式代码。
让IE6、IE7、IE8支持CSS3的圆角、阴影样式.
CSS3实现圆角阴影渐变效果兼容IE,火狐等主流浏览器,用过都说很好用,你懂的。
css兼容包-CSS圆角、阴影!适用于任何浏览器
几个常用插件,让ie8兼容html5和css的圆角,阴影、渐变、placeholder等属性
CSS圆角阴影边框的实现.txt
iecss3.htc css3圆角支持文件
使用div+css样式呈现圆角层 不需要背景图片 用div层与样式来实现圆角层的
css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件
为HTML网页做圆角。汇集css 无图片圆角,CSS圆角区块容器,div + CSS 圆角矩,WEB2.0 圆形边框 div 使用 css 做法。
css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角
HTML、css 、html 高光圆角阴影效果
css圆角,阴影,支持ie/firefox/chrome等全部浏览器
css3圆角支持火狐、IE和webkit
css3悬停按钮-CSS3鼠标悬停按钮阴影缩放特效代码.zip