What is the text-shadow property? Detailed explanation of text-shadow property-CSS Tutorial-php.cn

What is the text-shadow property? Detailed explanation of text-shadow property

云罗郡主

Release： 2018-10-23 13:48:26

Original

8045 people have browsed it

After learning CSS, many students want to achieve the shadow effect of a certain line of text. For artists, they will use ps. In the css style, a text-shadow tag in css can be used to achieve the shadow effect. Then the text shadow What is the text-shadow property? Let's summarize the text-shadow property below.

text-shadow attribute syntax

text-shadow:x-offset  y-offset  blur  color;

Copy after login

Detailed explanation of the above code:

x-offset represents the horizontal shadow, represents the horizontal offset position, and is the unit of x-offset It is px, which can also be expressed as a percentage. When the value of x-offset is positive, it means that the shadow that appears moves to the right. If the value of x-offset appears negative, it means that the shadow moves to the left.

y-offset represents vertical shadow. The unit of y-offset is also the same as x-offset. If the y-offset has a negative value, it means an upward shift. If it is a positive value, it means an upward shift. shift.

Blur represents the degree of blur of the shadow, but the most important point is that there cannot be negative values, only positive values. The larger the blur value, the blurr it is, and the smaller it is, the clearer it is. If we don't want to set a blur, we set blur to 0, and

color represents the color of the shadow.

Specific example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        #lvye
        {
            font-size:40px;
            text-shadow:4px 4px 2px gray;
            -webkit-text-shadow: 4px 4px 2px gray;
            -moz-text-shadow: 4px 4px 2px gray;
        }
    </style>
</head>
<body>
    <div id="lvye">php中文网</div>
</body>
</html>

Copy after login

The effect of the above code displayed in the browser is as follows:

What is the text-shadow property? Detailed explanation of text-shadow property

The above is the shadow of the text text-shadow What are the attributes? A complete introduction to the detailed explanation of the text-shadow attribute. If you want to know more about CSS video tutorial, please pay attention to the php Chinese website.

The above is the detailed content of What is the text-shadow property? Detailed explanation of text-shadow property. For more information, please follow other related articles on the PHP Chinese website!