In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-04 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >
Share
Shulou(Shulou.com)05/31 Report--
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!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.