有趣的css，用css实现镜面（ -webkit-box-reflect）

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

五彩斑斓黑123

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

阅读量1.1k

点赞数 3

本文链接：https://blog.csdn.net/qq_69444691/article/details/129973173

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

box-reflect属性值有：dirrection-方向:above向上，below向下，left向左，right向右。

1.下方出现镜面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 300px;
      height: 200px;
      margin: 0 auto;
      -webkit-box-reflect: below;
      overflow: hidden;
    }
    img {
      width: 100%;
    }
  </style>
  <body>
    <div class="box">
      <img src="https://img2.baidu.com/it/u=1313804089,2277216431&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=375" alt="" />
    </div>
  </body>
</html>

效果展示：

2.左边出现镜面

关键代码：

-webkit-box-reflect: left;

效果演示：

3. 上边出现镜面

关键代码：

-webkit-box-reflect: above;

效果演示：

4.右边出现镜面

关键代码 ：

-webkit-box-reflect: right;

效果演示：

总结：本文只是列举了-webkit-box-reflect 最简单的集中用法。更多用法：(-webkit-box-reflect：出现镜面的位置镜面与原图的距离镜面渐变 )

例：

-webkit-box-reflect: below 10px linear-gradient(transparent, 50%, rgba(255, 255, 255, 0.6));

生活原本沉闷，但跑起来就有风！

五彩斑斓黑123

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
有趣的css，用css实现镜面（ -webkit-box-reflect）

本篇文章提到了-webkit-box-reflect制作镜面的几个简单操作。
复制链接

扫一扫

专栏目录