How to implement font reflection in css3-CSS Tutorial-php.cn

How to implement font reflection in css3

藏色散人

Release： 2020-12-17 16:35:15

Original

4050 people have browsed it

How to implement font reflection in css3: First create an HTML sample file; then define a piece of text; then add the "box-reflect" attribute to the specified text to achieve font reflection.

How to implement font reflection in css3

The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.

Recommended: "css video tutorial"

css3 to achieve font reflection

In CSS, box-reflect is mainly used Properties to achieve font reflection effect.

The box-reflect property is mainly used to set or retrieve object reflection.

box-reflect syntax

box-reflect：none | <direction> <offset>? <mask-box-image>?

Copy after login

Since this attribute is not a W3C standard attribute, you still need to add the browser's private attribute when using it. According to the compatibility of the browser, use box You need to add the -webkit prefix when -reflect:

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
 box-reflect：none | <direction> <offset>? <mask-box-image>?

Copy after login

This attribute is not supported under Firefox. Under Firefox, you can use -moz-element() to simulate

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> html,body{ margin:50px 0; } .reflect{ width:950px; margin:0 auto; -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3)); font:bold 100px/1.231 georgia,sans-serif; text-transform:uppercase; } </style> </head> <body> <div>你看到倒影了么？</div> </body> </html>

Copy after login

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

above: Specify the reflection to be above the object

below: Specify the reflection to be 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. The value includes a numerical value or a percentage, where the percentage is determined according to the size of the object. Default is 0.

Use the 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:

Use absolute or relative addresses to specify the mask image.

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" />
<style>
html,body{
  margin:50px 0;
}
.reflect{
  width:950px;
  margin:0 auto;
  -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
  font:bold 100px/1.231 georgia,sans-serif;
  text-transform:uppercase;
}
</style>
</head>
<body>
<div>你看到倒影了么？</div>
</body>
</html>

Copy after login

Rendering:

How to implement font reflection in css3

The above is the detailed content of How to implement font reflection in css3. For more information, please follow other related articles on the PHP Chinese website!