CSS draw a lollipop example code
|
Background: Make a little progress every day, accumulate a little more, and you will get better and better Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lollipop</title>
<h3>Draw a lollipop using CSS</h3>
<p>Requirements:</p>
<p>1: The text in the middle of the lollipop is horizontally centered</p>
<p>2: No less than three layers of color</p>
<style>
.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:
0 0 0 10px #4286b4,
0 0 0 20px #fc052e,
0 0 0 30px #FBDD00,
0 0 0 40px #00BDFB;
border-radius: 200px;
color: #ffffff;
}
.bangbang{
width: 20px;
height: 150px;
margin: -80px 0px 0px 142px;
background-color: #00BDFB;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="round">
hello world!
</div>
<div class="bangbang"></div>
</body>
</html>Effect picture:
Knowledge gained today: 1:About the abbreviation of font font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:arial,verdana; can be written as: font: italic bold 17px/100px arial,sans-serif; 17px represents: font-size Things to note when using abbreviations: 1:font-size and line-height can only be written as one value using a slash / and cannot be written separately. 2: The order cannot be changed. This shorthand method only works when both font-size and font-family attributes are specified at the same time. Also, if you don't set font-weight, font-style, and font-variant, they will use default values. 2: About centering The simplest way is to make the text height the same as the div height, and then set text-align:center. If you don't set font, set line-height:100px; this can also achieve the effect of centering the text. 3: About the border I use the box-shadow attribute, which can be set to multiple values. It is more suitable for my current scenario. If the value requires two layers, or one layer, you can directly set the border or two div nesting or outline attributes. Summarize The above is the example code of drawing a lollipop in CSS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Design of image preview in content webpage
>>: Summary of DTD usage in HTML
Recommend
How to write the parent and child directories of HTML relative paths
How to indicate the parent directory ../ represent...
Implementation of Docker deployment of Nuxt.js project
Docker official documentation: https://docs.docke...
MySQL master-slave synchronization, implementation principle of transaction rollback
BinLog BinLog is a binary log that records all da...
Detailed steps for installing JDK and Tomcat on Linux cloud server (recommended)
Download and install JDK Step 1: First download t...
Prevent HTML and JSP pages from being cached and re-fetched from the web server
After the user logs out, if the back button on the...
A brief understanding of the three principles of adding MySQL indexes
1. The Importance of Indexes Indexes are used to ...
How to set the memory size of Docker tomcat
When installing Tomcat in Docker, Tomcat may over...
Detailed usage of kubernetes object Volume
Overview Volume is the abstraction and virtualiza...
TimePicker in element disables part of the time (disabled to minutes)
The project requirements are: select date and tim...
Detailed explanation of MySQL group sorting to find the top N
MySQL group sorting to find the top N Table Struc...
Hbase installation and configuration tutorial under Linux
Table of contents Hbase installation and configur...
HTML+CSS project development experience summary (recommended)
I haven’t updated my blog for several days. I jus...
How to view and close background running programs in Linux
1. Run the .sh file You can run it directly using...
Diving into JS inheritance
Table of contents Preface Prepare Summarize n way...
Advanced techniques for using CSS (used in actual combat)
1. The ul tag has a padding value by default in Mo...