CSS3的box-reflect(反射)

野性酷女 2024-03-26 22:08 73阅读 0赞

box-reflect(反射)一共有3个值

1.  **direction 定义方向**，取值包括 above 、 below 、 left 、 right  
    代码展示

img{
    		//above：指定倒影在对象的上边
    		//below：指定倒影在对象的下边
    		//left：指定倒影在对象的左边
    		//right：指定倒影在对象的右边
           -webkit-box-reflect: below;
        }

**效果图**  
![在这里插入图片描述][50e93d62076a42abb943d09d66db9089.png_pic_center]  
2. **offset** 定义反射偏移的距离  
 代码展示

img{
    		//用长度值来定义倒影与对象之间的间隔,可以为负值
           -webkit-box-reflect: below 10px;
        }

效果图  
![在这里插入图片描述][092da545fa7d4c71bfd0cfa8df564b65.png_pic_center]  
3. **mask-box-image**定义遮罩图像，该图像将覆盖投影区域  
 代码展示

img{
           -webkit-box-reflect: below 0px linear-gradient(
           			//镜面透明度从下往上渐变
                    transparent,rgba(0,0,0,0.8)
           );
        }

效果图  
![在这里插入图片描述][5796cb9caf1b4e1382e4bbe6b785dde0.png_pic_center]

[50e93d62076a42abb943d09d66db9089.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/967315283daa4b5e98cbfa02edc14322.png
[092da545fa7d4c71bfd0cfa8df564b65.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/df121182069548a5982a171afb903cca.png
[5796cb9caf1b4e1382e4bbe6b785dde0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8522349eac5b43a087eaeae3f37ca422.png

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3的box-reflect(反射)

box-reflect(反射)一共有3个值 1. direction 定义方向，取值包括 above 、 below 、 left 、 right 代码展示

野性酷女/ 2024年03月26日 22:08/ 0 赞/ 74 阅读

相关 CSS3盒子模型（CSS3）

CSS3盒子模型（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

落日映苍穹つ/ 2023年10月03日 13:46/ 0 赞/ 65 阅读

相关 CSS3过渡效果（CSS3）

CSS3过渡效果（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

左手的ㄟ右手/ 2023年10月03日 13:46/ 0 赞/ 72 阅读

相关 CSS3动画序列（CSS3）

CSS3动画序列（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

旧城等待，/ 2023年10月03日 13:46/ 0 赞/ 67 阅读

相关 CSS3动画的基本使用（CSS3）

CSS3动画的基本使用（CSS3） <!DOCTYPE html> <html lang="en"> <head> <m

不念不忘少年蓝@/ 2023年10月03日 13:46/ 0 赞/ 103 阅读

相关 CSS3动画的常见属性（CSS3）

CSS3动画的常见属性（CSS3） <!DOCTYPE html> <html lang="en"> <head> <m

浅浅的花香味﹌/ 2023年10月03日 13:39/ 0 赞/ 87 阅读

相关 CSS / CSS 3 入门

CSS是什么？指层叠样式表 (Cascading Style Sheets) 样式定义用于显示 HTML 元素 CSS 基本语法： ![在这里插入图

小咪咪/ 2023年07月17日 02:43/ 0 赞/ 69 阅读

相关什么是css css3,CSS3简介 - CSS3 | 绿叶学习网

对于刚刚接触CSS3的小伙伴，一开始肯定会有这么一个疑问：“CSS3跟CSS有什么区别呢？”实际上，CSS是从CSS1、CSS2、CSS2.1到CSS3这几个版本一路升级而来的

约定不等于承诺〃/ 2022年09月02日 14:52/ 0 赞/ 295 阅读

相关 Python3的反射

class A(): def __init__(self, name, age): self.name = name

逃离我推掉我的手/ 2022年04月24日 10:36/ 0 赞/ 177 阅读

相关 3-3 Java反射

目录一.反射概念二.类对象概念和获取方式三.获取类的信息和类的类型四.获取继承关系五.获取构造方法信息并创建对象六.获取字段信息获取和设置字段的值

ゞ浴缸里的玫瑰/ 2022年02月27日 06:42/ 0 赞/ 300 阅读