使用CSS3 box-reflect给网页文本添加倒影

2017-01-11 22:24

阅读:2,298

很多朋友抱怨在网页设计的时候为了提升网站的美观度,经常要添加调用js去实现网页文本倒影,开创者网站设计的时候也遇到过这样的情况。这里别逗了好么告诉大家一个简单的方法,CSS3支持添加倒影了。具体使用情况如下:

.reflect{
	-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,.3));
	font:bold 100px/1.111 "Microsoft YaHei",georgia,sans-serif;
	text-transform:uppercase; // 全部大写
}
文本向下倒影显示
.reflect{
	-webkit-box-reflect:above 0 -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,.3));
	font:bold 100px/1.0 "Microsoft YaHei",georgia,sans-serif;
	text-transform:uppercase; // 把所有文本转换为大写,全部小写为:lowercase,首字母大写为:capitalize
}
文本向上倒影显示 属性兼容的浏览器

别逗了好么

努力每一天,奋斗为明天。

文章 981 作品 25,341

热门作品

文章推荐

猜你喜欢

牛站