Heim > Artikel > Web-Frontend > Wie zeichnet man einen Lutscher mit CSS?
Wie zeichnet man einen Lutscher mit CSS?
- 王林nach vorne
- 2020-04-24 09:15:113859Durchsuche
Werfen wir zunächst einen Blick auf die Renderings:
(empfohlene verwandte Video-Tutorials: CSS-Video-Tutorial)
CSS-Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>棒棒糖</title>
<h3>用css画一个棒棒糖</h3>
<p>要求:</p>
<p>1:棒棒糖中间文字为水平居中</p>
<p>2:不得少于三层颜色</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>
hello world!
</div>
<div></div>
</body>
</html>Empfohlenes Tutorial: CSS-Schnellstart
Das obige ist der detaillierte Inhalt vonWie zeichnet man einen Lutscher mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So erzielen Sie einen Scrolleffekt mit gepunktetem Rand in CSSNächster Artikel：So erzielen Sie einen Scrolleffekt mit gepunktetem Rand in CSS