box-reflect

最新推荐文章于 2024-09-30 15:42:36 发布

V。on

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量77

点赞数

分类专栏： css 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_40864647/article/details/128974730

版权

css 专栏收录该内容

32 篇文章 6 订阅

订阅专栏

该文章介绍了CSS中的box-reflect属性，用于在元素下方、上方、左侧或右侧创建图像反射。通过指定方向、偏移量和mask-box-image（可以是渐变或URL），可以实现不同类型的反射效果。文中提供了多个示例，展示如何应用此属性来创建各种反射样式。

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

box-reflect

用于创建图像反射。语法：(offset、mask-box-image可选)

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

direction 方向，可取值 none | below | above | left right
offset 偏移量，length | percentage，10px | 10%可以为负值
mask-box-image渐变， none | url | 渐变

示例：

<!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>
    <style>
        .container { margin: 200px 0; }
        img { width: 200px; height: 200px; }
        /* 无反射 */
        .none { -webkit-box-reflect: none; }
        /* 向下反射 */
        .below { -webkit-box-reflect: below; }
        /* 向上反射 */
        .above { -webkit-box-reflect: above; }
        /* 向左反射 */
        .left { -webkit-box-reflect: left;margin-left: 200px; }
        /* 向右反射 */
        .right { -webkit-box-reflect: right; }
    </style>
</head>
<body>
    <div class="container">
        <img src="./2.png" class="none">
        <img src="./2.png" class="below">
        <img src="./2.png" class="above">
        <img src="./2.png" class="left">
        <img src="./2.png" class="right">
    </div>
</body>
</html>

在这里插入图片描述
综合示例：

<!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>
    <style>
        img { width: 300px; height: 200px; }
        .below { -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, .4)); }
    </style>
</head>
<body>
    <img src="./2.png" class="below">
</body>
</html>