CSS Fifth hours

1. List of weights

A>b>c>d>0

Like/*bc*/>/*b*/.

2, CSS new properties

Text shadow: Text-shadow: Horizontal displacement, vertical displacement, blur radius, color

Text indent: text-indent:

Additional Note: The previous lesson also said that font-related CSS properties can be inherited, Text-indent can also be inherited

. C1{width:400px;height:100px;word-wrap:break-word;}

<div class= "C1" >english Chinese English Chinese English Chinese 中文版 English english</div>

Forcibly on one line: White-space:nowrap

Out-of-section color cut off: text-overflow:clip

Out-of-section omitted: text-overflow:ellipsis;

Add that both attributes are used together with Overflow:hidden to render the effect.

3. Fillet Border-radius

Set up, border-radius:15px;

Border-top-left-radius: Upper left corner

The other three corners are equally available.

4, Box shadow: Box-shadow

5, background Map covered: background-image:url (picture path); Background-repeat:no-repeat;background-size:cover (scaled by equal scale)

6, transform (rotation)

Before effect:

After the effect:

. c1{border:solid 1px #F00; width:100px;height:100px;margin:0 auto;margin-top:100px;background-color: #F00; transform : Rotate (40deg) scale (1.2);} Rotate 40 degrees clockwise, 1.2 times times larger than the original

7. Animation define more complex animations

Animation:x-spin 20s Infinite Linear
@keyframes x-spin{0%{transform:rotate x (0deg); 50%{transform:rotate x (180deg); 100%{transform:rotate x (3600DEG)}

8. Gradient (linear gradient (e.g. top to down), radial gradient (spread from center to outside)

9, Pure is to do the response layout is very common compatibility processing way ~

Learning is a long-term thing, accumulate, insist!

CSS Fifth hours