巧用css3的

1. 语法
2. 取值
• <direction>
• <offset>
• <mask-box-image>
3. 兼容性
4. -webkit-box-reflect 基本用法
• 设置倒影距离
• 设置倒影虚实
5. 使用 -webkit-box-reflect 实现一些有意思的动效
• 在按钮中运用 -webkit-box-reflect
• 在文字中运用 -webkit-box-reflect
• 在 3D 中运用 -webkit-box-reflect
6. 使用 -webkit-box-reflect 创造艺术图案
7. 最后

-webkit-box-reflect 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。

接下来我带大家利用-webkit-box-reflect这个属性巧妙的实现一些有意思的效果，废话不多说一起来看一下。

语法

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

取值

none：

无倒影

<direction>

above：

指定倒影在对象的上边

below：

指定倒影在对象的下边

left：

指定倒影在对象的左边

right：

指定倒影在对象的右边

<offset>

<length>：

用长度值来定义倒影与对象之间的间隔。可以为负值

<percentage>：

用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-image>

none：

无遮罩图像

<url>：

使用绝对或相对地址指定遮罩图像。

<linear-gradient>：

使用线性渐变创建遮罩图像。

<radial-gradient>：

使用径向(放射性)渐变创建遮罩图像。

<repeating-linear-gradient>：

使用重复的线性渐变创建背遮罩像。

<repeating-radial-gradient>：

使用重复的径向(放射性)渐变创建遮罩图像。

兼容性

截止至 2021-02-19，它的兼容性已经达到了 91.02%，看看 CANIUSE -webkit-box-reflect：

完整的代码，可以戳这里：

CodePen Demo — -webkit-box-reflect artist

最后

以上就是今天分享的 css 技术笔记，主要介绍了 -webkit-box-reflect 的一些有意思的用法，希望对你有帮助，可能业务中不太实用，但是非常有趣。