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

This article introduces the relevant knowledge of "what is the shadow attribute in css3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Shadow attributes: 1, "text-shadow" attribute represents text shadow, syntax is "text-shadow: horizontal shadow vertical shadow blur degree color"; 2, "box-shadow" represents box shadow, syntax is "box-shadow: horizontal shadow vertical shadow blur distance size".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What does Shadow attribute represent in css3

CSS3 is the upgraded version of CSS technology, and the development of CSS3 language is towards modularization. The previous specification as a module is too large and complex, so it is broken down into some small modules, and more new modules are added. These modules include:

Box model, list module, hyperlink mode, language module, background and border, text special effects, multi-column layout, etc.

The advantage of CSS3: CSS3 will be fully backward compatible, so there is no need to modify the current design to keep them working. Web browsers will also continue to support CSS2. For us, the main impact of CSS3 is that new available selectors and properties will be available, which will allow new design effects (such as dynamics and gradients) to be implemented, and can be very simple

The design appears in the design effect (for example, using columns)

CSS3 contains a lot of content, I will roughly explain the shadow properties

1 、 text-shadow

Attribute: text Shadow

Syntax: text-shadow:w-shadow h-shadow blur color

W-shadow: horizontal distance (must have: negative values are supported)

H-shadow: vertical distance (must have: negative values are supported)

Blur: shadow blur, optional (negative values are not supported)

Color: color of shadow

Note:

The positions of the first value (w-shadow) and the second value (h-shadow) are not interchangeable

When setting multiple shadows for the same text, the shadows and shadows are separated by commas

In addition to these single shadows, there are multiple shadows, such as: hollow text, Yang text, Yin text these text special effects, can be achieved.

1:stroke is a hollow effect attribute

2:outset is an attribute of masculine effect

3:inset is an attribute of negative effect.

2 、 box-shadow

Attribute: box Shadow attribut

Syntax: box-shadow:x-shadow y-shadow blur spread color inset

Required for X-shadow. The position of the horizontal shadow. Allow negative values

Required for Y-shadow. The position of the vertical shadow. Allow negative values

Blur is optional. Fuzzy distance

Spread is optional. The size of the shadow. Allow negative values

Color is optional. The color of the shadow.

Inset is optional. Change the inner shadow from the outer shadow (at the beginning).

Default: outside shadow display (outset).

Note: when transforming from an outer shadow to an inner shadow, the shadow position will change symmetrically.

Let's take a look at the effect:

Outer Shadow effect:

Inner shadow effect: add inset to the css effect

That's all for "what does the Shadow attribute in css3 refer to?" Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.