CSS3 corresponding CSS New features

Box model

Box model frame
1, Can have fillets border-radis
2, You can have pictures border-image / And, of course, the image filling effect

Box model shadow
1,box-shadow Shadow can be used for any element
Through shadows , Three dimensional card type can be realized Effect of ; Use as a text note / Image notes ; such as Card post of comments by Jingdong and tuniu
2,text-shadow Text also has a shadow effect

Box model width/height
1, use box-sizing Can be specified width/height Which part of


Special effects of background pictures
1, Can support multiple pictures as background overlay at the same time , Tile separately
2, You can control the size of the background picture , Fill the whole element ( stay 2 in , Can only be tiled, etc )
3, Can control the background image in Display in box model region

A lot more PS Unique features
1, Gradient effect : Linear gradient linear-gradient/radial-gradient Any angle can be specified , Repeat or not , And so on
2, Photo Filter : Realize various saturation / color / vague Usage of function

You can use fonts other than browser fonts by yourself

Responsive layout

Multimedia query + Responsive image = Responsive web page (PC/ Mobile adaptation ?)
1, adopt @media Multimedia query , sure use PC Various browser adjustments for ; It's more adaptable Mobile end
2, Responsive image , Avoid the image's extended overflow exceeding the size of the parent element

Supplementary reading : Responsive web, Media query


2D transformation & transition
1, adopt 2D transformation Achieve many dynamic effects , The most common is translate along x,y Axis move element , For example, implemented Button press / Bounce effect ;scale
, Image grows from small to large , From big to small .
2, through the use of transition [ attribute ] Duration , Achieve transition
The combination of the two can be realized , quite a lot Animation effects of components .
meanwhile 2D transformation It can also be combined animation Achieve similar results

1,@keyframes donghua Define multiple styles for animation transitions , It could be from to perhaps percentage
2, stay Specified in element style This animation animation:donghua 5s;

Flexible box layout
The new layout doesn't seem to have much use meaning ?

Wrap text word-wrap; Multiple columns column-count

The conclusion is
1, Increased animation :2D transformation transition animation
2, Increased the stereoscopic sense of display : Shadow of box model / fillet Background pictures, etc
3, Responsive web page

©2019-2020 Toolsou All rights reserved,
stay Vue Use in Web Worker【Python- data fetch 】 read txt Each line of file generates a list of data ( Essence )2020 year 6 month 26 day C# Class library GUID Help class Fiddler Simulate request sending and modifying response data Huawei's limited old rivals benefit the most ? More and more people divide the cake !Vue el-select obtain label value Keras Summary of training data loading ( Essence )2020 year 6 month 26 day C# Class library File read and write operation help class Hack Bar 2.1.2 Press F9 No response Maximum security risk of cloud computing : Unclear safety responsibility