需要幫助獲取以下示例影像的 CSS。其中，圓圈部分內的字母為div，下標Z為影像（圓形影像）
.text-center {
text-align: center;
}
*,
::before,
::after {
margin: 0px;
background-repeat: no-repeat;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.img-circle.small-avatar {
background: linear-gradient(rgb(106, 108, 111) 0%, rgb(38, 39, 41) 100%);
height: 40px;
width: 40px;
color: rgb(255, 255, 255);
font-size: 14px;
font-family: arial;
padding: 11px 0px;
margin-top: 5px;
}
.img-circle {
border-radius: 50%;
}<div class="text-center">
<div class="img-circle small-avatar center-block">
<p align="center">D</p>
</div>
</div>uj5u.com熱心網友回復：
像這樣的東西？
.text-center {
text-align: center;
}
*,
::before,
::after {
margin: 0px;
background-repeat: no-repeat;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.img-circle.small-avatar {
background: linear-gradient(rgb(106, 108, 111) 0%, rgb(38, 39, 41) 100%);
height: 40px;
width: 40px;
color: rgb(255, 255, 255);
font-size: 14px;
font-family: arial;
padding: 11px 0px;
margin-top: 5px;
}
.img-circle {
border-radius: 50%;
}
.rounded {
border-radius: 5px;
width: 20px;
background-color: rgb(221, 160, 221);
position:absolute; top:35px;
margin-left:30px;
}<div class="text-center">
<div class="img-circle small-avatar center-block">
<p align="center">D</p>
</div>
<div class="rounded">
<p align="center">Z</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351426.html
上一篇：Flexalign-items:center只對一個元素有效
下一篇：如何制作倒角？[復制]