Мне интересно, есть ли более простой способ создания круговых div, чем то, что я делаю сейчас.Простой способ создания круга div, чем использование изображения?
В настоящее время я просто делаю изображение для каждого разного размера, но это раздражает делать это.
Есть ли в любом случае использование CSS, чтобы сделать divs круглыми, и я могу указать радиус?
Вот демо: http://jsfiddle.net/thirtydot/JJytE/1170/
CSS:
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
HTML:
<div class="circleBase type1"></div>
<div class="circleBase type2"></div><div class="circleBase type2"></div>
<div class="circleBase type3"></div>
Чтобы сделать эту работу в IE8 and older, вы должны загрузить и использовать CSS3 PIE. Моя демонстрация выше не будет работать в IE8, но это только потому, что jsFiddle не принимает PIE.htc.
Моя демо выглядит следующим образом:
Я не могу сделать div круговым в chrome.It работает в Mozilla, хотя ... Мой URL-адрес: http://chokate.maninactionscript.com/chokates/ щелкните по изображению пустыни или тому, который был до него показан div при масштабировании изображения не является круглым, что находится в мозилле. –
@ techie_28: 'div' на вашей странице * * round, который вы можете увидеть, если добавить к нему' border: 5px solid red'. Проблема в том, что части изображения, которые «нависают над кругом», не скрываются. Ни один из обычных обходных путей особенно прост в применении здесь. Я предлагаю использовать свойство '-webkit-mask-image' для исправления браузеров WebKit (и сохранить« border-radius », для других браузеров). Подробнее здесь: http://www.webkit.org/blog/181/css-masks/. Вы также можете рассмотреть вопрос о том, как здесь переполняться стеком, чтобы узнать, есть ли у кого-нибудь другие идеи. – thirtydot
Как я могу подать заявку здесь? –
Существует также [плохая идея], используя несколько (20+) горизонтальных или вертикальных div 1px для построения круга. This jQuery plugin использует этот метод для построения различных форм.
Вы можете использовать радиус, но он не будет работать на IE: border-radius: 5px 5px;.
'border-radius: 5px;' теперь будет работать и на IE9 +. – MattAllegro
На самом деле возможно.
См. CSS Tip: How to Make Circles Without Images. См. demo.
Но будьте осторожны, у него есть серьезные недостатки с точки зрения совместимости в основном, вы делаете кошку коры.
Посмотреть работаетhere
Как вы будете видеть вас просто настроить height и width до половины border-radius
Удачи!
Привет, спасибо за ссылку 'jsfiddle'! Эта ссылка является единственной, кто работает от вашего ответа на данный момент. ;) – TooroSan
Попробуйте
.iphonebadge {
border-radius:99px;
-moz-border-radius:99px;
-webkit-border-radius:99px;
background:red;
color:#fff;
border:3px #fff solid;
background-color: #e7676d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
background-image: linear-gradient(top, #e7676d, #b7070a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a');
-webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
-moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
display:inline-block;
padding:2px 2px 2px 2px ;
margin:3px;
font-family:arial;
font-weight:bold;
}
Действительно круто. ;-) – Oliver
Удивительный чувак, вы рок – VenomVendor
Установка границы радиуса каждой стороны элемента 50% создает отображение окружности в любом размере :
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
это не работает на мобильных браузерах –
Это, вероятно, метод, который следует использовать сейчас (в 2017 году). – Scribblemacher
В основном это использует положение div абсолютно для размещения cha racter в заданных координатах. поэтому, используя параметрическое уравнение для круга, вы можете нарисовать круг. если бы вы изменили положение div на относительное, это приведет к синусоидальной волне ...
В сущности, мы являемся графическими уравнениями, злоупотребляя свойством position. Я не очень хорошо разбираюсь в css, поэтому кто-то может сделать это более элегантным. наслаждаться.
это работает во всех браузерах и мобильных устройствах (о которых я знаю). я использую его на своем собственном веб-сайте для рисования синусоидальных волн текста (www.cpixel.com). оригинальный источник этого кода можно найти здесь: www.mathopenref.com/coordcirclealgorithm.html
<html>
<head></head>
<body>
<script language="Javascript">
var x_center = 50; //0 in both x_center and y_center will place the center
var y_center = 50; // at the top left of the browser
var resolution_step = 360; //how many times to stop along the circle to plot your character.
var radius = 50; //how big ya want your circle?
var plot_character = "·"; //could use any character here, try letters/words for cool effects
var div_top_offset=10;
var div_left_offset=10;
var x,y;
for (var angle_theta = 0; angle_theta < 2 * Math.PI; angle_theta += 2 * Math.PI/resolution_step){
x = x_center + radius * Math.cos(angle_theta);
y = y_center - radius * Math.sin(angle_theta);
document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
}
</script>
</body>
</html>
Это то, что я хочу, но можно ли показать список кругов в панели, поддерживающих правильное расстояние между кругами, как показано здесь. Https://plnkr.co/edit/KgWsnwDbgwiacGeJ7O7i?p=preview –
ширина подавай и высоту в зависимости от размера, но сохранить и равное
.circle {
background-color: gray;
height: 400px;
width: 400px;
border-radius: 100%;
}<div class="circle">
</div>'border-radius: 50 %; 'достаточно. – MattAllegro
.fa-circle{
color: tomato;
}
div{
font-size: 100px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>Просто хотел отметить еще одно решение, которое отве возникает вопрос: «Легче ли создать круг div, чем использовать образ?» который должен использовать FontAwesome.
импортирован файл fontawesome CSS или из CDN here
, а затем вы просто:
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
и вы можете дать ему любой цвет вы хотите любой размер шрифта.
Вы можете попробовать функцию radial-gradient CSS:
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
применить его к div слоя:
<div class="circle"></div>
Добавление CSS свойство "границы радиуса: 50%;" к любому div делает его круговым.
В каких браузерах это должно поддерживаться? – thirtydot
Посмотрите на мой ответ на этот связанный вопрос, особенно с демонстрационными примерами: http://stackoverflow.com/questions/4451350/round-mask-on-an-image-growing-from-centre-of-that-image/ 4451459 # 4451459 – Orbling
Вы также можете использовать SVG (VML) для создания круга. – jasssonpet