How to use css to draw a lollipop

This article mainly explains "how to use css to draw a lollipop". Interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use css to draw a lollipop.

The code is as follows:

Draw a lollipop with css

Request:

1: the middle text of the lollipop is horizontal and centered

2: no less than three layers of color

.round {width: 100px; height: 100px; background-color: # e5e7e9; position: relative; text-align: center; margin: 100px; font: italic bold 17px/100px arial,sans-serif; box-shadow: 00 10px # 4286b4, 000 20px # fc052e, 000 30px # FBDD00, 000 40px # 00BDFB; border-radius: 200px; color: # ffffff } .bangbang {width: 20px; height: 150px; margin:-80px 0px 0px 142px; background-color: # 00BDFB; border-radius: 10px;} hello world!

Effect picture:

The knowledge accumulated today:

1: abbreviation for font

Font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana

It can be written as:

Font: italic bold 17px/100px arial,sans-serif

Representative of 17px: font-size

Representative of 100px: line-height

Points to pay attention to when using abbreviations:

1:font-size and line-height can only be composed of a value by slash /, not separately.

2: the order cannot be changed. This shorthand method works only if both the font-size and font-family properties are specified. And, if you don't set font-weight, font-style, and font-varient, they will use the default

2: about centering

The simplest text height is the same as that of div, when setting text-align:center. If you set line-height:100px; without setting font, you can also achieve the effect of text centering.

3: about the border

I am using the box-shadow property, which can be set to multiple values. It is more suitable for my present scene. If the value requires two layers, or one layer, you can directly set the boder or two div nesting or outline properties.

At this point, I believe you have a deeper understanding of "how to use css to draw a lollipop". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!