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
Installation process of MySQL5.7.22 on Mac
1. Use the installation package to install MySQL ...
Summary of the differences between Mysql primary key and unique key
What is a primary key? A primary key is a column ...
Detailed explanation of dynamic Christmas tree through JavaScript
Table of contents 1. Animated Christmas Tree Made...
JS implements the sample code of decimal conversion to hexadecimal
Preface When we write code, we occasionally encou...
Table setting background image cannot be 100% displayed solution
The following situations were discovered during d...
MySQL uses binlog logs to implement data recovery
MySQL binlog is a very important log in MySQL log...
HTML Tutorial: Definition List
<br />Original text: http://andymao.com/andy...
Command to view binlog file creation time in Linux
Table of contents background analyze method backg...
VMware WorkStation 14 pro installation Ubuntu 17.04 tutorial
This article records the specific method of insta...
What are your principles for designing indexes? How to avoid index failure?
Table of contents Primary key index Create indexe...
Web page creation for beginners: Learn to use HTML's hyperlink A tag
The hyperlink a tag represents a link point and i...
Practice of implementing user login through front-end and back-end interaction of Node.js
Table of contents 1. Project Requirements Second,...
The spacing between multiple divs with inline-block is different from the programming method
When learning about inline-block, I found that the...
Database backup in docker environment (postgresql, mysql) example code
Table of contents posgresql backup/restore mysql ...
How to build gitlab on centos6
Preface The original project was placed on the pu...