CSS3的box-reflect(反射)

野性酷女 2024-03-26 22:08 57阅读 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 条评论，57人围观）

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

相关阅读

相关 CSS3的box-reflect(反射)

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

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

相关 CSS3盒子模型（CSS3）

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

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

相关 CSS3过渡效果（CSS3）

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

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

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

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

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

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

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

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

相关 CSS3的点滴

CSS3的点滴 1、CSS3给前端带来了什么？（CSS3特性） > 过去：我们要么押注用户愿意为优雅漂亮的设计多等点时间（顺便说一句，用户不愿意），要么为了

淩亂°似流年/ 2022年05月24日 02:50/ 0 赞/ 170 阅读

相关 CSS3的渐变

1、线性渐变（Linear Gradients）线性渐变可以沿着一跟轴线改变颜色，用法如下： <!DOCTYPE html> <html> <

àì夳堔傛蜴生んèń/ 2022年05月10日 05:52/ 0 赞/ 267 阅读

相关 Python3的反射

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

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

相关 CSS3的Columns

大家都看过报纸，报纸的内容大都是按列排布的。那在前端布局中该怎么实现类似报纸一列一列布局的效果呢？文章目录 columns \`column-width\

今天药忘吃喽~/ 2022年03月12日 13:56/ 0 赞/ 213 阅读

相关 3-3 Java反射

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

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