揭秘CSS(第 1 版)
4.9.4 倒影效果
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

盒尺寸

处理溢出

框的生成

框的外观

显示风格

自由缩放

轮廓样式

倒影效果

在CSS3之前,要在网页中使用倒影效果,只能事先使用 photoshop 将倒影设计好,然后导入到网页中,这不但耗费资源,而且影响开发的效率。

CSS3中,新增了 box-reflect属性,通过该属性为元素添加倒影效果。语法格式为:

box-reflect:<direction> <offset>? <mask-box-image>?

也就是说,在 box-reflect属性中,通过 direction、offset、mask-box-image 这 3 个参数来定义倒影的方向、偏移和遮罩效果。

表 4-9 box-reflect属性的参数及含义
参数含义
direction用来设置倒影出现的方向,可选值有 above | below | left | right,分别表示倒影在对象的上、下、左、右出现
offset用来设置倒影距离对象本身的距离,用长度或百分百来定义(百分百根据对象的尺寸确定),默认值为0。可以是正值,也可以是负值。为正值时,倒影向远离元素的方向偏移;为负值时,倒影向靠近元素的方向偏移
mask-box-image用来设置倒影上的遮罩效果,遮罩将覆盖倒影区域。遮罩可以是none、图像、线性渐变、径向渐变、重复线性渐变、重复径向渐变。如果省略该参数值,则默认无遮罩

默认情况下,一个元素是没有倒影的,通过 box-reflect属性,可以为任何元素添加倒影效果,视频也不例外。不过,目前为止,box-reflect属性仅得到 Webkit 内核的支持,在使用时需要添加浏览器私有前缀。如,页面上有一个容器,容器的内容是一首唐诗:

<div class="wrapper">
<h1>静夜思</h1>
<h2>唐·李白</h2>
<p>床前明月光,疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
</div>

现在,通过 box-reflect属性,在容器的下方,距离容器本身 2px 的地方,为容器添加倒影,让容器中的文本出现镜像效果:

.wrapper {
    width: 200px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-box-reflect: below 2px;
}
h1 {
    font-size: 16px;
    letter-spacing: 10px;
}
h2 {
    font-size: 13px;
    font-weight: normal;
}

上述代码的运行结果如图 4‑75 所示:

box-reflect属性效果
图4-75 box-reflect属性效果

镜像的倒影效果非常简单,而在实际应用中,还可以使用遮罩来制造更加绚丽的倒影效果。如,使用线性渐变来制造朦胧的文本倒影:

.wrapper  {
    …
    -webkit-box-reflect: below 2px linear-gradient(transparent, transparent 50%, #000);
}

运行结果如图 4‑76 所示:

box-reflect属性倒影+遮罩效果
图4-76 box-reflect属性倒影+遮罩效果

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验