<div class="first-face">
<span class="pip"></span>
</div>
/*Downloaded from https://www.codeseek.co/guihailiuli/css-flex-layout-pip-top-center-MyprGL */
.first-face {
display: -webkit-flex;
display: -ms-flex;
display: flex;
/* display: block; */
justify-content: center;
align-items: center;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: -webkit-flex;
display: -ms-flex;
display: flex;
display: block;
font-family: 'Open Sans', sans-serif;
background: #292929;
}
/* [class$="face"]表示以face结尾的类 */
[class$="face"] {
margin: 16px;
padding: 4px;
background-color: #e7e7e7;
width: 104px;
height: 104px;
object-fit: contain;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
border-radius: 10%;
}
.pip {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
margin: 4px;
background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
/*Downloaded from https://www.codeseek.co/guihailiuli/css-flex-layout-pip-top-center-MyprGL */