-webkit-box-reflect
非标准: 该特性是非标准的,请尽量不要在生产环境中使用它!
-webkit-box-reflect
CSS 属性可让你将元素内容在特定方向上进行轴对称反射。
css
/* 方向值 */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;
/* 偏移量值 */
-webkit-box-reflect: below 10px;
/* 蒙版值 */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 全局属性值 */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;
语法
值
above
、below
、right
、left
-
这些关键字指示反射发生的方向。
<length>
-
指示反射的大小。
<image>
-
描述要应用于反射的蒙版。
形式定义
形式语法
-webkit-box-reflect = [ above | below | right | left ]? <length>? <image>?
规范
这是一个非标准的属性。在 CSS 中创建反射效果的标准方法是使用 CSS 的 element()
函数。
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
-webkit-box-reflect |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Non-standard. Check cross-browser support before using.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
参见
- Apple 文档。
- Webkit 文档。
- Lea Verou 撰写的有关使用 CSS 特性创建反射效果的文章已经纳入标准跟踪。