Home > Article > Web Front-end > How to implement font reflection in css3

How to implement font reflection in css3

藏色散人Original: 2020-12-16 09:46:523880browse

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.

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>?

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>?

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>

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>

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!

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

Previous article：Solution to the problem that external css cannot be introduced under ie11Next article：Solution to the problem that external css cannot be introduced under ie11

See more

How to implement font reflection in css3

Related articles