Maison > Article > interface Web > Comment dessiner une sucette en CSS
Comment dessiner une sucette en CSS
- 王林avant
- 2020-04-24 09:15:113868parcourir
Jetons d'abord un coup d'œil aux rendus :
(tutoriels vidéo associés recommandés : tutoriel vidéo CSS)
Code CSS :
<!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>Tutoriel recommandé : Démarrage rapide CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer