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

Editor to share with you how css to achieve gradient color, omit tags, embedded fonts, text shadow effect, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Gradient color

CSS3 Gradient is divided into linear gradient (linear) and radial gradient (radial). As different rendering engines have different syntax for gradients, here we only analyze the usage of W3C standard syntax for linear gradients, and the rest of you can consult the relevant materials. W3C syntax is already supported by browsers such as IE10+, Firefox19.0+, Chrome26.0+, and Opera12.1+.

In this section, we talk about linear gradients:

Parameters:

The first parameter: specify the gradient direction, which can be expressed by the keyword "angle" or "English":

(click the picture to enlarge)

When the first parameter is omitted, it defaults to "180deg", which is equivalent to "to bottom".

The second and third parameters, which represent the start and end points of the color, can have multiple color values.

Background-image:linear-gradient (to left, red, orange,yellow,green,blue,indigo,violet)

Effect picture:

2. Text-overflow and word-wrap

Text-overflow is used to set whether an ellipsis mark (...) is used to mark the overflow of text within an object.

Syntax:

However, text-overflow is only used to explain how to display text overflow. To achieve the effect of ellipsis in the event of text overflow, you must also define to force the text to be displayed on one line (white-space:nowrap) and the overflow content to be hidden (overflow:hidden). Only in this way can you achieve the effect of displaying ellipsis in the overflow text. The code is as follows:

Text-overflow:ellipsis; overflow:hidden; white-space:nowrap

At the same time, word-wrap can also be used to set the text behavior, whether to break the line break when the current line exceeds the boundary of the specified container.

Syntax:

Normal is the default value of the browser, and break-word is set to wrap lines inside long words or URL addresses. This property is not commonly used, so you can use the default value of the browser.

3. Embedded font @ font-face

Font-face can load font files on the server side so that the browser side can display fonts that are not installed on the user's computer.

Syntax:

@ font-face {

Font-family: font name

Src: the relative or absolute path of the font file on the server

}

Once this is set, you can set the font style in (font-*) as you would with a normal font.

For example:

P {

Font-size: 12px

Font-family: "My Font"

/ * required, set the same value of font-family in @ font-face * /

}

4. Text Shadow text-shadow

Text-shadow can be used to set the shadow effect of text.

Syntax:

Text-shadow: X-Offset Y-Offset blur color;X-Offset: indicates the horizontal offset distance of the shadow. When the value is positive, the shadow is offset to the right and vice versa to the left.

Y-Offset: refers to the vertical offset distance of the shadow. If the value is positive, the shadow shifts downward and vice versa.

Blur: refers to the blur degree of the shadow. The value cannot be negative. If the value is larger, the shadow is more blurred, and vice versa. If you do not need shadow blur, you can set the Blur value to 0.

Color: refers to the color of the shadow, which can be used in RGB color.

For example, we can use the following code to set the shadow effect.

Text-shadow: 0 1px 1px # fff

These are all the contents of this article entitled "how to achieve gradient colors, omitting tags, embedded fonts, and text shadow effects in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.