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

This article mainly introduces the relevant knowledge of "what are the expression methods of shadow in css3". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "what are the expression methods of shadow in css3" can help you solve the problem.

Css3 shadow is divided into two categories: 1, text shadow, set syntax "text-shadow: horizontal position vertical position blur distance color;"; 2, box shadow, set syntax "box-shadow: horizontal position vertical position blur distance spread color inset;".

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

There are two kinds of shadows in CSS3: text shadow text-shadow and box shadow box-shadow. These two properties can achieve the effect of shadow without adding background pictures, which provides great convenience when we beautify the web page. So how do you use these two attributes respectively?

1. Text-shadow

The syntax specification for this attribute is text-shadow: 1px 1px 1px # 666,

Before we talk about css shadow properties, let's take a look at the general knowledge about shadows.

Shadow is generated by shining light on an object and creating a shadow in the place of backlight.

As shown below, there are shadows like right and down:

The following picture shows the shadows up and left.

Let's take a look at the text-shadow property, which consists of four values, the first value is the horizontal offset of the shadow, the second value represents the vertical offset, the third value represents the range of shadow divergence, and the fourth value represents the shadow color.

One, the default right and downward shadows use positive values, and left and up negative values.

Text-shadow: 1px 1px 1px # 666; indicates shadows offset one pixel to the right and down, text-shadow:-1px-1px 1px # 666; represents shadows offset to the left and up. Text-shadow: 0px 0px 1px # 666; indicates no offset, and there will be equal shadows around this time, as shown below

Second, multiple sets of attribute values can be separated by commas

Text-shadow: 1px 1px 1px # 666 Jing mi 1px-1px 1px # 666; indicates that there is a shadow offset of one pixel all around.

Using the text-shadow attribute, we can create exquisite bump text effects.

Title body {background-color: # cccccc;} p {text-align: center; font-size: 60px; margin-top: 50px; font-weight: bold; color: # cccccc;} .tu {text-shadow:-1px-1px 1px # fff,1px 1px 1px # 000000 } .ao {text-shadow: 1px 1px 1px # fff,-1px-1px 1px # 000;}

Study hard

You will be better and better day by day

The operation is as follows:

2. Box-shadow

The properties of box-shadow and text shadows are very similar, one is to shadow the text, the other is to shadow the container.

The six values of box-shadow are as follows:

The position of h-shadow horizontal shadow, the value can be negative (cannot be omitted)

The position of the v-shadow vertical shadow, the value can be negative (cannot be omitted)

Distance of blur blur (optional)

Distance of spread shadows (optional)

Color of color shadow (optional)

Inset changes external shadows (outset) to internal shadows (optional)

None default (box-shadow:none can cancel the shadow effect of the border)

Note: you can add one or more shadows to the box. This attribute is a comma-separated list of shadows, each specified by (2-4) length values, an optional color value, and an optional inset keyword. The value for omitting length is 0.

Example: adding multiple shadow styl

Css3 Border Shadow # box1 {margin-top: 100px; margin-left:100px; background-color: # fff; width: 100px; height: 100px; box-shadow: 2px 2px 10px red, 5px 5px 20px blue;}

Running effect

This is the end of the content about "what are the ways to express shadows in css3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.