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
Ubuntu 20.04 desktop installation and root permission activation and ssh installation details
The article mainly records the simple installatio...
JS Canvas interface and animation effects
Table of contents Overview Canvas API: Drawing Gr...
Summary of Linux environment variable configuration methods (differences between .bash_profile and .bashrc)
Under Linux, if you download and install an appli...
Win7 installation MySQL 5.6 tutorial diagram
Table of contents 1. Download 2. Installation 3. ...
Common methods of Vue componentization: component value transfer and communication
Related knowledge points Passing values from pa...
Let IE6, IE7, IE8 support CSS3 rounded corners and shadow styles
I want to make a page using CSS3 rounded corners ...
3 functions of toString method in js
Table of contents 1. Three functions of toString ...
Example code for changing the style of other tags by hovering the mouse using CSS
Preface: As far as I know, currently CSS can only...
How to use anti-shake and throttling in Vue
Table of contents Preface concept Stabilization d...
How to configure environment variables in Linux environment
JDK download address: http://www.oracle.com/techn...
Comment reply pop-up mask effect implementation idea compatible with ie 8/chrome/firefox
I like to pay attention to some news on weekdays a...
How to set and get the number of Mysql connections
Get the number of connections --- Get the maximum...
MySQL select results to perform update example tutorial
1. Single table query -> update UPDATE table_n...
Detailed explanation of execution context and call stack in JavaScript
Table of contents 1. What is the execution contex...
Complete Tutorial on Deploying Java Web Project on Linux Server
Most of this article refers to other tutorials on...