主页 / 问题 / 640689
Accepted
Alexandr_TT
Asked:2020-03-17 17:05:29 +0000 UTC2020-03-17 17:05:29 +0000 UTC

只使用 CSS 画一个圆

  • 772

是否可以仅使用绘制一个将在大多数浏览器（IE、Mozilla、Safari）中显示的圆圈CSS？

问题翻译：Draw Circle using css alone

html

6 个回答

  1. Best Answer

    好吧，既然问题是“仅使用 CSS”，我会这样回答：

    html {
  background: white;
}

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

body::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding-top: 100%;
}

    • 21
    • 创建div相同的高度和宽度，从而形成一个正方形（对于圆形，使用相同的值）。
    • 添加border-radius50%，这将使正方形变圆。
    • 然后你可以使用背景颜色/渐变/（甚至是伪元素）来创建这样的东西： 

    .red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}
    <div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>

    答案翻译：Draw Circle using css alone @jbutler483

    • 18

  3. 我喜欢这个答案，它是唯一支持 IE8 的答案，因为它不使用border-radius：

    取而代之的是插入一个带有 unicode 编号的圆圈符号25СF：

    .circle:before {
  content: ' \25CF';
  font-size: 200px;
}
    <span class="circle"></span>

    • 13

  4. 我认为代码一切都很清楚：

    .circle {
    width: 100px;
    height: 100px;
    background: blue;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
} 
    <div class = "circle"></div>

    • 7

  5. 这是创建圆圈的mixin 

    @mixin circle($width, $color) {
      width: $width;
      height: $width;
      background: $color;
      border-radius: $width/2;
    }

.circle {
  @include circle(200px, #123);
}

    用法 - 

    <div class="circle "></div>
    • 6

  6. 还有一个使用圆形渐变的选项：

    .circle {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(black 0%, black 70%, transparent 70%);
}
    <div class="circle"></div>

    • 6

相关问题