兼容性
既然是CSS3的属性，我们当然要来看看兼容性：点击查看
接下来，我们来了解box-reflect如何使用？
语法如下：
-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>? box-reflect:none | <direction> <offset>? <mask-box-image>?
属性说明：
none：此值为默认值，表示无倒影；
direction：生成倒影的方向
above：指定倒影在对象的上边 below：指定倒影在对象的下边 left：指定倒影在对象的左边 right：指定倒影在对象的右边
offset：图片与倒影间隔
length：用长度值来定义倒影与对象之间的间隔。可以为负值 percentage：用百分比来定义倒影与对象之间的间隔。可以为负值
mask-box-image：用来设置倒影的遮罩效果；
值可以是：
none：无遮罩图像 url：使用绝对或相对地址指定遮罩图像。 linear-gradient：使用线性渐变创建遮罩图像。 radial-gradient：使用径向(放射性)渐变创建遮罩图像。 repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。 repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。
光是纸上谈兵可不行，我们还是要通过实例来看看效果。
倒影的方向
在这个例子中，我弄了三个img：
<div class="box1"> <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" /> </div> <div class="box2"> <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" /> </div> <div class="box3"> <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" /> </div>
css如下：
.box1,.box2,.box3{
width:120px;
float:left;
margin-right:180px;
}
img{
width:100%;
}
.box1 img{
-webkit-box-reflect:right;
box-reflect:right;
}
.box2 img,.box3 img{
-webkit-box-reflect: above;
box-reflect:above;
}
.box3{
padding-top:200px;
}
效果图如下：
在这里有一个疑问，box2和box3中的图片都设置了box-reflect:above，都是在顶部生成投影，为什么box2看不到效果呢？原因就是我给box3设置了padding-top:200px，而box2没有，初步估计是因为没有空间让其显示生成的倒影。
倒影与对象之间的距离
了解了生成倒影的方向后，我们来看第二个属性，还是看例子：
依旧用三张图片，不过样式改变一下：
.box1 img{
-webkit-box-reflect:below 30px;
box-reflect:below 30px;
}
.box2 img{
-webkit-box-reflect:below -30px;
box-reflect:below -30px;
}
.box3 img{
-webkit-box-reflect:below 5%;
box-reflect:below 5%;
}
效果图如下：
接下来我们学习最后一个属性。
遮罩效果
（1）使用渐变给倒影添加遮罩效果
.box1 img{
-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
}
效果如下：
使用背景图给倒影添加遮罩效果
首先我们需要一张五角星的png图片：
.box2 img{
-webkit-box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);
box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);
}
效果如下：
总结
好了，到这里，本文关于CSS3的box-reflect属性的语法和使用已经介绍完了。希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。