CSS uses padding to generate icons

Insert the HTML structure first:

<class= "Line-three"></div><  class= "Circle"></div>

The structure is not very concise! The CSS code is as follows:

. Line-three {        width: 150px; height: 30px;         padding:15px 0;         border-top: 30px solid;         border-bottom: 30px solid;         background-color:currentcolor;          background-clip: content-box;}

. Circle{color:green;Margin-top:30px;width:150px;Height:150px;Border-radius:50%;Border:10px Solid;padding:10px;background:CurrentColor;Background-clip:Content-box;}

As follows:

How is it simple? Let's summarize now:

1, make full use of padding elements!

2, use the border element, set the border!

3,CSS3:background-clip:content-box; the best thing to do: use Background:currentcolor!!!

Note:CurrentColor refers to the current text, that is, when the color of the text changes, the background color will also change, that is, the color of the icon will change.

Use this feature to implement more and better interactive experiences!!! such as (hover)

CSS uses padding to generate icons