CSS power: drawing with a DIV and css power div

CSS power: drawing with a DIV and css power div

These images are drawn using a DIV, but the principle is not complicated.

These images are all drawn by CSS and implemented through the combination of background-image,

For example, the implementation of the mushroom header is achieved through the radial-gradient radial gradient, and the linear-gradient linear gradient is superimposed on each other, for example:

123456789101112

div {  width: 170px;  height: 140px;  background-image:         radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),        linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),        radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),        radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),        radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),        linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);        border-radius: 140px 140px 80px 80px;}

Online Demo: here

Both the frontend and backend occlusion relationships are implemented through the background-image of the before and after pseudo elements.

PS: This method does not fully support earlier IE versions.

Original address: click here

How should a css be included in all DIV

The div + css mode is generally used to combine the id in the div with the CSS.
CSS should play a role in the statement, mainly by the selector name, such
Dd {color: # 66f ;}
In a statement, <dd> </dd> can be used. If you want to use them all, you only need to overlay them. This is also the cascade performance of CSS stacked style sheets.

In a css style table, if a div class is set to 'edit', how can we obtain all the divs other than this type of div?

Hello, you need to implement this in javascript. css is only static control and cannot be dynamically controlled. js can dynamically modify css styles. You can get all the divs in js, traverse these divs, and determine whether their attributes are "edit". If not, set the style you want.