Предишен ◈ Следващото

Как да се закръглят CSS ъгли

CSS3 позволява на уебмастера да закръглят ъглите. В тази статия ще видите всички видове ефекти, които могат да бъдат постигнати с помощта на този имот.
Преди да се разгледат ъгли на кривина в CSS, препоръчвам да прочетете предишните уроци по темата:
Css граница и маржовете - марж и уплътнение.
граничен радиус - универсален имот, който дава възможност за ъглов закръгляване елемент рамка. Този имот, обаче, работи само в модерни браузъри.
С цел да се закръгляване и работа в някои по-стари браузъри, използвайте специалния префикс:

За Chrome браузър до 4.0, Safari преди 5.0, IOS

Най-големият проблем с граничен радиус появява в IE (работи с версия 9), в операта - в 10.5.
граничен радиус точка за всяка страна на границата:

Стойности граничен радиус:
  1. пиксела
  2. проценти на блок ширина,
  3. ги,
  4. стойностите могат да бъдат определени чрез наклонена черта (/). Първата стойност (преди наклонена черта) определя ширината на радиуса, а вторият - за височина на блока.
например:




граничен радиус



радиус на границата



резултат:

За да може този код да работи в старата Verviers Chrome и Firefox дублира имоти, да ги предписва с представки -webkit и -moz:
граничен радиус: 15px;
-WebKit-граничен радиус: 15px;
-Моз гранично-радиус: 15px; Пример работа неравномерно ъгъл закръгляване:

И краткото граница радиус: стойностите, означени от интервал или наклонена черта. Може би индикация / *
  1. Едно важно - в този случай, правилото важи за целия блок. например:

  • двама - първото число показва, радиусът на кривината на горния ляв и долния десен ъгъл, а вторият - за горния десен ъгъл и долния ляв ъгъл. например:

    граничен радиус: 25 пкс 5px;

  • три - първият - за горния ляв ъгъл, а вторият - за горния десен ъгъл и долния ляв ъгъл, а третият - в долния десен ъгъл:

    граничен радиус: 25 пкс 5px 10px;

  • четири - за всеки ъгъл, като се започне от горе вляво и продължава по часовниковата стрелка. Шофиране:
    Как да се закръглят CSS ъгли

    например:

    граничен радиус: 25 пкс 5px 10px 1px;

    • За тези, които не обичат да пишат код на ръка, има генератор за придаване на CSS ъгли.
    Може да се наложи генератор закръгляване ъглите на изображението.

    Свързани статии

    Подкрепете проекта - споделете линка, благодаря!