主页 / 问题 / 875837
Accepted
elik
Asked:2020-08-31 20:25:21 +0000 UTC2020-08-31 20:25:21 +0000 UTC

如何创建一个？

  • 772

在此处输入图像描述

如何用这样的文字在里面制作这样的圆圈？
想到的就是div放2个文本并给出它border-radius : 50 %，就完成了

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.oval{
    background: red;
    display: inline-block;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    text-align: center;
    padding: 3px;  
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>

<div class="oval">
    <h2>0,5</h2>
    <p>kg</p>
</div>

</body>
</html>

html

2 个回答

  1.   width: 10em; /* поддерживаются любые единицы, в том числе проценты */
  margin: 1em auto;
  background: silver;
  border-radius: 50%;

    复制

    • 1
  2. Best Answer

    .circus{
  width: 100px;
  height: 100px;
  background-color: #1798D8;
  border-radius: 50px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: arial;
}

.circus div:nth-child(1){
  font-size: 44px;
  letter-spacing: 2px;
}

.circus div:nth-child(2){
  font-size: 26px;
  letter-spacing: normal;
}
    <div class="circus">
  <div>0,5</div>
  <div>кг</div>
</div>

    • 1

相关问题