Създаване на кръгове и елипси с помощта на CSS3

Предистория материали по основните програмни езици и оформление на сайтове.

Готов техника за създаване на прости и сложни динамични уебсайтове с PHP и MySQL.

разработване на уеб сайтове в "ключ".

Развитие на отделните фрагменти обекти, съвети за оформлението на уеб страници и уеб програмиране.

уеб инструмент

уеб магазин

Уеб услуги

Уеб графика

уеб ресурси

Искаш ли да сме в крак с развитието, което е на сайта? Регистрация за получаване на последните новини и статии.

Погледнете на Google

Създаване на кръгове и елипси с CSS3

Създаване на кръг

От потребителите на сайта получава много въпроси за това как да се използва CSS3 възможности за създаване на геометрични фигури във формата на кръг или триъгълник. Тъй като ние току-що са обсъдени проблемите на въртене на ъглите и една от статиите е споменато създаването на кръгове и елипси, нека продължим темата започна и направи кръгове и елипси.

Създаване на нов документ и определете свойствата на окръжност, които искаме да се направи. За тази цел ние определяме полето за обиколка с едни и същи стойности на ширина и височина. За размера на полето ще се регулира автоматично до увеличаване на блокове от текст, параметрите са указани размерите в дялове на ем вместо пиксела. Ние посочи граничен радиус стойност, минимална стойност половин ширина / височина.

кръг марж: 30px 20px;
ширина: 10em;
височина: 10em;
граница: # 000000 твърдо 2px;
-Моз гранично-радиус: 5em;
-WebKit-граничен радиус: 5em;
граничен радиус: 5em;
>

Нека дадем този имот блок Разделение. Всички кръга е изготвен. Остава само да се украсяват един кръг, като фона на параметъра собственост.

Създаване на елипса

Създаване на овал под формата на елипса, не е много по-различен от създаването на кръг. Кръгли дъга, за разлика от дъгата на кръг, малко изправяне. За да зададете ъгъла закръгляване в елиптична дъга, въведете две стойности, разделени с наклонена черта, като този: граничен радиус: 200px / 100px. (В Safari 3 и 4 се използват нестандартни синтаксис без наклонена черта, и двете стойности са разделени с обикновено пространство.). Предходни стойности описват гладка елиптична крива за удължаване с 200 пиксела хоризонтално, но само на 100 пиксела вертикално. За всички ъгли, можете да зададете различни стойности.

елипса марж: 30px 20px;
ширина: 200px;
Височина: 100 пиксела;
граница: # 000000 твърдо 2px;
-Моз гранично-радиус: 200px / 100px;
-WebKit-граничен радиус: 200px / 100px;
граничен радиус: 200px / 100px;
>

Нека дадем сега собственост на съдържащ Разделение сме създали. Ellipse е готова, сега тя може да украсяват.

Пълен уеб страница изходния код с изображения на кръга и елипсата

Кръгът радиус 5em

елипса

Тестване на страницата. В уеб браузъра ще изглежда така:

Ако тествате страницата в IE8 и долу на браузъра, вместо в кръг и с овална ще видите квадрат и правоъгълник. За това, за да бъдат приведени в съответствие, добавете следния код, за да стиловете на цифрите, които ние прегледани в статията Създаване на заоблени ъгли в IE браузър не поддържа стандарти CSS3:

Данните за уеб страница ще бъде подходящ тип, т.е. кръг и елипса.