CSS3 box-reflect 属性

最新推荐文章于 2023-11-10 21:49:06 发布

~嘘~禁止想象~

最新推荐文章于 2023-11-10 21:49:06 发布

阅读量269

点赞数 1

分类专栏：前端 # HTML5 and CSS3

本文链接：https://blog.csdn.net/weixin_45773503/article/details/105120535

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

HTML5 and CSS3

22 篇文章 0 订阅

订阅专栏

1. 语法

box-reflect：none | direction | offset | mask-box-image

direction = above | below | left | right
offset = length | percentage
mask-box-image = none | url | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient

取值	作用
none	无倒影
above	指定倒影在对象的上边
below	指定倒影在对象的下边
left	指定倒影在对象的左边
right	指定倒影在对象的右边
length	用长度值来定义倒影与对象之间的间隔。可以为负值
percentage	用百分比来定义倒影与对象之间的间隔。可以为负值
none	无遮罩图像
url	使用绝对或相对地址指定遮罩图像。
linear-gradient	使用线性渐变创建遮罩图像。
radial-gradient	使用径向(放射性)渐变创建遮罩图像。
repeating-linear-gradient	使用重复的线性渐变创建背遮罩像
repeating-radial-gradient	使用重复的径向(放射性)渐变创建遮罩图像。

注：假设定义了 mask-box-image，offset必须指定，否则可以省略

2. 栗子：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html,
        body {
            margin: 100px;
        }
        
        .reflect {
            width: 950px;
            margin: 0 auto;
            -webkit-box-reflect: below 0% -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .3));
            font: 80px bold;
        }
    </style>
</head>

<body>
    <div class="reflect">帅 无需解释</div>
</body>

</html>

~嘘~禁止想象~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 box-reflect 属性

1. 语法box-reflect：none | direction | offset | mask-box-imagedirection = above | below | left | rightoffset = length | percentagemask-box-image = none | url | linear-gradient | radial-gradient |...
复制链接

扫一扫

专栏目录