CSS Gradient color ellipsis markup Embed font text Shadow full introduction

Here's a full understanding of CSS gradient color ellipsis embedded font text shading. Content is very good, now share to everyone, but also for everyone to make a reference.

1. Gradient Color

CSS3 Gradient are divided into linear gradients (linear) and radial gradients (radial). Because different rendering engines implement the syntax of gradients, we only analyze the use of the standard syntax for linear gradients, and the rest of us can read the relevant data. The ie10+, firefox19.0+, chrome26.0+ and opera12.1+ have been supported by browsers.

In this section, let's take a look at the linear gradient:

Parameters:

First parameter: specifies the gradient direction , which can be expressed by the keyword " angle " or "English" :

(Click the picture to enlarge)

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

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

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

：

2, Text-overflow and Word-wrap

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

Grammar:

But Text-overflow is only used to illustrate the text overflow in what way display, to achieve overflow when the effect of ellipsis, you must also define the force text in a row (white-space:nowrap) and overflow content is hidden (Overflow:hidden), This is the only way to achieve an overflow text display ellipsis effect, 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 if the current line exceeds the bounds of the specified container.

Grammar:

Normal is the browser default, Break-word set to wrap within a long word or URL address, this property is not commonly used, with the browser default value.

3. Embed Font @font-face

@font-face is able to load the server-side font file, allowing the browser to display fonts that are not installed on the user's computer.

Grammar:

@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 normal fonts.

Like what:

p {    font-size:12px;    font-family: "My Font";    /* must item, set font-family same value in @font-face */}

4. Text Shadow Text-shadow

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

Grammar:

Text-shadow:x-offset y-offset blur color; X-offset: Represents the horizontal offset distance of the shadow, whose value is positive when the shadow is offset to the right, and vice versa;

Y-offset: Refers to the vertical offset distance of the shadow, and if its value is positive, the shadow is shifted downward and the inverse is offset upward;

Blur: Refers to the degree of blur of the shadow, its value cannot be negative, if the higher the value, the more blurred the shadow, the clearer the shadow, if you do not need shadow blur can set the Blur value to 0;

Color: Refers to the colors of the shadow, which can use the RGBA color.

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

text-shadow:0 1px 1px #fff

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!