Home >Web Front-end >CSS Tutorial >CSS reflection

CSS reflection

高洛峰
高洛峰Original
2017-02-23 10:03:301600browse

Previous words

 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

Syntax

-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

For more CSS reflection related articles, please pay attention to the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn