How to achieve reflection effect in css3-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to achieve reflection effect in css3

王林

Nov 13, 2020 pm 02:15 PM

css3

How to implement the css3 reflection effect: You can use the box-reflect attribute to achieve the reflection effect, such as [-webkit-box-reflect:below 10px]. The box-reflect property is used to set or retrieve the reflection of an object. This property contains three values: direction, offset, and mask image.

How to achieve reflection effect in css3

#box-reflect property sets or retrieves the object reflection.

(Learning video recommendation: css video tutorial)

The box-reflect attribute includes 3 values.

1. Direction defines the direction, and the values include above, below, left, and right.

above：

Specify that the reflection is above the object

below：

Specify that the reflection is below the object

left ：

Specify the reflection to be on the left side of the object

right：

Specify the reflection to be on the right side of the object

2. Offset defines the distance of the reflection offset, take Values include numeric values or percentages, where percentages are determined based on the object's dimensions. Default is 0. Use a length value to define the distance between the reflection and the object. Can be negative. Defines the distance between the reflection and the object as a percentage. Can be negative.

3. mask-box-image defines the mask image, which will cover the projection area. If this parameter value is omitted, it defaults to an unmasked image.

Values:

none: No mask image:

Specify the mask image using absolute or relative addresses.

Create a mask image using a linear gradient.

Create a mask image using a radial (radial) gradient.

Create a backmask image using a repeating linear gradient.

Create a mask image using a repeating radial (radial) gradient.

Example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
    width:200px;
    height:200px;
    background:-webkit-linear-gradient(left,red,yellow,green);
    transform:scale(-1,1);
    -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));
}
</style>
</head>

<body>
<div class="box"></div>
</body>
</html>

Effect:

How to achieve reflection effect in css3

Related recommendations: CSS tutorial

The above is the detailed content of How to achieve reflection effect in css3. For more information, please follow other related articles on 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