CSS3新特性之倒影

最新推荐文章于 2023-09-11 22:39:46 发布

飞羽轩

最新推荐文章于 2023-09-11 22:39:46 发布

阅读量1.8k

点赞数

文章标签： CSS3 倒影倒影渐变

本文链接：https://blog.csdn.net/weixin_42679187/article/details/81144535

版权

本文介绍了CSS3的box-reflect属性用于创建倒影效果，详细讲解了其用法，包括方向设定、间距调整和倒影图像的设置。需要注意此属性在不同浏览器的兼容性问题。

摘要由CSDN通过智能技术生成

x在Web的制作过程中，有时候需要实现一些倒影效果，此时就需要使用box-reflect属性了

需要注意的是该属性目前仅在Chrome,Safari和Opera浏览器下支持，Firefox需要做特殊处理

box-reflect语法
-webkit-box-reflect:direction offset mask-box-image

取值：direction 表示生成倒影的方向above(上方)/below(下方)/left(左侧)/right(右侧)

offset 表示生成的倒影与原图之间的间距

mask-box-image 用来设置倒影的效果，可以是背景图片，也可以是渐变生成的背景图像

理论完毕，来点实际的,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒影</title>
    <link rel="stylesheet" href="css/xuanxue.css"/>
</head>
<body>
     <h1>倒影</h1>
     <div class="reflection">
         <img src="img/timg.jpg" alt=""/>
     </div>
</body>
</html>