利用css3实现网页内容倒影效果

最新推荐文章于 2024-05-09 11:02:42 发布

徐云飞-web

最新推荐文章于 2024-05-09 11:02:42 发布

阅读量776

点赞数

文章标签： web前端 css 网页设计 html5

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/xuyunfei_2012/article/details/51659252

版权

CSS-实现的倒影的效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css的倒影的效果</title>

<style>

-webkit-box-reflect:位置距离px -webkit-gradient()

位置选项:above,below,left,right

.box{

font-size: 72px;

color: red;

-webkit-box-reflect:

below -8px

-webkit-gradient(linear,

left top,left bottom,

from(rgba(0,0,0,0)),

to(rgba(255,255,255,0.5)));

}

</style>

</head>

<body>

<div class="box"><img src="images/shadow1.jpg" width="200"></div>

</body>

</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用css3实现网页内容倒影效果

css的倒影的效果 -webkit-box-reflect:位置距离px -webkit-gradient() 位置选项:above,below,left,right .box{ font-size: 72px;
复制链接

扫一扫

徐云飞-web CSDN认证博客专家 CSDN认证企业博客

码龄12年

21: 原创

26万+: 周排名

110万+: 总排名

15万+: 访问

: 等级

1276: 积分

7: 粉丝

39: 获赞

6: 评论

37: 收藏

私信

关注

热门文章

分类专栏

js 10篇
css 5篇
html 2篇
gulp 2篇
正则表达式 2篇
移动端
ReactNative 1篇
react 1篇
fiber 1篇

最新评论

javascript(js)中函数apply和call的用法、区别、联系
高振哥哥: 哥们最开始的基本用法哪里两个函数都是apply，
JS中连等赋值操作使用注意事项(a=b=c)
ljm7784: 在js中赋值顺序根本不重要，关键的是a.x首先执行新增了个属性。不信你把a.x=a={n:2}改成a=a.x={n:2}效果是一样的但在Python中a=a.x=c相当于a=c a.x=c有先后顺序
JS中连等赋值操作使用注意事项(a=b=c)
AnnasSong: 这个是由于运算符优先级，.(字段访问)大于=(赋值操作)，所以先进行.运算，此时a还是指向原来内存地址，在原来内存地址新增了x属性，.操作完成以后，再执行从右到左赋值操作，此时a指向新的内存地址，这时再访问a.x肯定就是undefined。以下代码可以排除猜想： var a = {n:1}; var b = a// GC没有回收{n:1}，依旧是undefined a.x = a = {n:2}; console.log(a.x); // 输出undefined
JS中连等赋值操作使用注意事项(a=b=c)
LeahYep.: 博主的第一种猜想，指向一个具体的对象，这两个对象长得一样，但是地址空间也不相同吧 [code=javascript] a和b同时引用了一个对象，如： var b={n:1}; var a=b; a.n=0; console.log(b);//Object {n: 0} 测试真正的连等赋值： [/code]
JS中连等赋值操作使用注意事项(a=b=c)
u010005995: 感觉博主两个猜想的结果是一样的吧，第一个猜想对应的代码好像不太对，感觉并不对应啊。

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。