Home > Article > Web Front-end > CSS reflection
CSS reflection is currently only supported by chrome and safari browsers, and the -webkit- prefix needs to be added. This article will introduce CSS reflection box-reflect in detail
-webkit-box-reflect
Initial value: none
Applies to: block-level elements (including inline-block)
Inheritance: None
Value: none | <direction>
<offset>
? <mask-box-image>
?
<direction>(required) indicates that box-reflect generates reflection Direction, mainly includes the following values:
above:表示生成的倒影在对象(原图)的上方; below:表示生成的倒影在对象(原图)的下方; left:表示生成的倒影在对象(原图)的左侧; right:表示生成的倒影在对象(原图)的右侧;
<offset>(optional) is used to set the distance between the generated reflection and the object (original image). Its value can be It is a fixed pixel value, or it can be a percentage value.
<mask-box-image> (optional) is used to set the reflection mask effect, which can be a background image, or It can be a background image generated by gradient