Home >Web Front-end >CSS Tutorial >How to implement font reflection in css3
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:
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!