css3倒影效果怎么实现


当前第2页 返回上一页

举例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

.box{

    width:200px;

    height:200px;

    background:-webkit-linear-gradient(left,red,yellow,green);

    transform:scale(-1,1);

    -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));

}

</style>

</head>

 

<body>

<div class="box"></div>

</body>

</html>

效果:

89c5183d2993a318bb3d8bf0a070df7.png

相关推荐:CSS教程

以上就是css3倒影效果怎么实现的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

html5实践-如何使用CSS3丰富图片样式的详解(二)

通过代码示例,了解CSS3+javascript按钮水波纹效果

ie7兼容CSS3吗?

css怎么实现翻转效果

background-size属性怎么用

html CSS3是什么

html5和CSS3扁平化风格博客教程的资源分享

关于老式浏览器兼容html5和CSS3的问题详解

谷歌浏览器不支持CSS3

使用CSS3模拟打字效果(代码实例)

更多相关阅读请进入《CSS3》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...