Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

CSS3 box-reflect attribute

2025-01-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Network Security >

Share

Shulou(Shulou.com)06/01 Report--

Syntax:

Box-reflect: includes 3 values.

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

Above:

Specify the reflection on top of the object

Below:

Specifies that the reflection is below the object

Left:

Specifies that the reflection is on the left side of the object

Right:

Specifies that the reflection is on the right side of the object

2. Offset defines the distance of the reflection offset, including a numeric value or percentage, where the percentage is determined according to the size of the object. The default is 0.

The length value is used to define the interval between the reflection and the object. Can be negative. The interval between the reflection and the object is defined as a percentage. Can be negative.

3. Mask-box-p_w_picpath defines a mask image that covers the projected area. If the parameter value is omitted, the default is the unmasked image.

Value:

None: unmasked images:

Specify the mask image using an absolute or relative address.

Create a mask image using a linear gradient.

Use a radial (radioactive) gradient to create a mask image.

Use repeated linear gradients to create a back mask image.

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

Description:

Sets or retrieves object reflection.

The corresponding script feature is boxReflect.

As follows:

12 3 4 5 untitled document 6 7. Box {8 width:200px; 9 height:200px;10 background:-webkit-linear-gradient (left,red,yellow,green); 11 transform:scale (- 1 transform:scale 1); 12-webkit-box-reflect:below 10px-webkit-linear-gradient (transparent,transparent 50% recorder rgba (0pen0penol .8)); 13} 14 15 16 17 18 19 20

The above is a reflection of a linear gradient of color, and our pictures can also be used as reflection effects.

Img {- webkit-box-reflect:below 10px-webkit-linear-gradient (transparent,transparent 50% recorder rgba (0meme 0rem .8));}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Network Security

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report