您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
css3的翻转属性（倒影）reflect
发布时间：2015-06-21 17:21:52编辑：雪饮阅读（）
实例一
<!doctype html>
<html>
<head>
<style>
img{
margin:400px;
/*-webkit-box-reflect:above;设置倒影在盒子的上方*/
-webkit-box-reflect:below;/*设置倒影在盒子的下方*/
/*-webkit-box-reflect:left;设置倒影在盒子的左方*/
/*-webkit-box-reflect:right;设置倒影在盒子的左方*/
}
</style>
</head>
<body>
<img src="./goddess/goddess_heart.jpg">
</body>
</html>
预览图
实例二
<!doctype html>
<html>
<head>
<style>
img{
margin:200px;
-webkit-box-reflect:right 100px/*第二个参数用于设定倒影和原盒子模型之间的距离，可以为负数*/
}
</style>
</head>
<body>
<img src="./goddess/goddess_heart.jpg">
</body>
</html>
预览图
实例3
<!doctype html>
<html>
<head>
<style>
p{
font-size:36px;
-webkit-box-reflect:below 2px -webkit-linear-gradient(top,transparent,transparent 50%,#FFF);
/*
向下翻转:距离两像素
渐变：线性渐变，从上向下渐变，渐变方式是透明度（渐变最终的透明度是50%），透明颜色为红色
*/
}
</style>
</head>
<body>
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<p>谁知盘中餐</p>
<p>粒粒皆辛苦</p>
<p>当午，汗滴和下土，盘中餐和粒粒</p>
</body>
</html>
预览图
实例4
<!doctype html>
<html>
<head>
<style>
img{
margin:100px;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,transparent,#FFF)
}
</style>
</head>
<body>
<img src="./goddess/goddess_eye.jpg" />
</body>
</html>
预览图
关键字词：css3,个人博客,倒影