Нарисуйте круг, используя только css [дубликат]

этот вопрос уже есть ответ здесь:

можно ли нарисовать круг, используя только css, который может работать на большинстве браузеров (например,Mozilla,Safari) ?

7 101
html css css-shapes

7 ответов:

вы могли бы использовать .до этого с содержимым с символом Юникода для круга (25CF).

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

Я предлагаю это, поскольку border-radius не будет работать в IE8 и ниже (я признаю тот факт, что предложение немного ментально).

117

Да, нарисуйте коробку и дайте ей радиус границы, который составляет половину ширины коробки:

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

рабочая демо:

http://jsfiddle.net/DsW9h/1/

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
<div id="circle"></div>
167
  • создайте div с заданной высотой и шириной (так, для круга используйте ту же высоту и ширину), образуя квадрат
  • добавить border-radius на 50% что сделает его круглым по форме. (Примечание: префикс не требуется для долго)
  • затем вы можете поиграть с background-color / градиенты / (даже pseudo elements), чтобы создать что-то вроде этого:

.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>
36

Это будет работать во всех браузерах

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
9

ЮП.. вот мой код:

<style>
  .circle{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: blue
  }
</style>
<div class="circle">
</div>
8

border radius-хороший вариант, если вы боретесь со старыми версиями IE, попробуйте HTML-коды 

&#8226;

и использовать css для изменения цвета. Вывод:

*

8

да, возможно, вы можете использовать свойство CSS border-radius. Для получения дополнительной информации взгляните на http://zeeshanmkhan.com/post/2/css-rounded-corner-gradient-drop-shadow-and-opacity

6