css3怎么实现字体倒影


当前第2页 返回上一页

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style>

html,body{

  margin:50px 0;

}

.reflect{

  width:950px;

  margin:0 auto;

  -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

  font:bold 100px/1.231 georgia,sans-serif;

  text-transform:uppercase;

}

</style>

</head>

<body>

<div>你看到倒影了么?</div>

</body>

</html>

效果图:

e3f2fe5a64e924f259f994570da61b2.png

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

返回前面的内容

相关阅读 >>

CSS3多媒体查询的简单介绍(代码示例)

如何html标签和js中设置CSS3 var变量

CSS3的:out-of-range和:in-range伪类有什么用?(代码示例)

CSS3 如何画圆

text-shadow属性怎么用

animation-delay属性怎么用

CSS3中实现动画有哪两种方式

CSS3 cubic-bezier()实现链接悬停动画效果的方法介绍

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

CSS3 flex布局总结

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




打赏

取消

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

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

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

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

评论

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